Disclaimer

Introduzione

Introduzione >

Introduzione

 Return to chapter overview

Questo help online vuole essere una guida operativa per quanti vogliono incominciare a lavorare subito con WebSite X5 per creare il proprio Sito, Blog o Negozio di e-commerce.

Seguendo passo per passo il percorso di sviluppo proposto, viene data una descrizione puntuale dell'interfaccia del programma, illustrando tutti i comandi e le opzioni presenti nei menu, nei pannelli e nelle finestre previste.

Le spiegazioni e gli approfondimenti qui proposti, uniti all'intuitività della logica di lavoro e alla disponibilità delle numerose anteprime sempre aggiornate in tempo reale, permetteranno a chiunque di lavorare al meglio con WebSite X5 e di ottenere siti accattivanti, coinvolgenti e professionali.

La presente guida di WebSite X5 fa riferimento alla versione Evolution v. 10 ma, tenendo presenti le limitazioni specifiche, può essere utilmente consultata anche per lavorare con altre versioni del Programma.

Nello specifico, la guida è articolata nelle seguenti sezioni:

- | L'ambiente di lavoro Illustra tutte le funzioni messe a disposizione dal software, nelle diverse finestre che vengono presentate durante la creazione e pubblicazione di un Sito.
- | Best Practice Propone utili tutorial che simulano alcune procedure per risolvere compiti specifici come la creazione di un modulo per la raccolta dati o l'impostazione di un'area riservata attraverso password.
- | Approfondimenti Propone delle schede di approfondimento su vari temi connessi alla creazione di un Sito Web.

Ultimo aggiornamento: versione 10


Sommario

Presentazione di WebSite X5

Introduzione >

Presentazione di WebSite X5

 Return to chapter overview

Crea Siti Web, Negozi Online e Blog in 5 passi

WebSite X5 è il software ideale per creare i Siti Web che avresti sempre voluto avere. Non richiede nessuna conoscenza di programmazione e consente di lavorare in modo completamente visuale attraverso un'interfaccia intuitiva e ricca di numerose anteprime, aggiornate in tempo reale.

In questo modo, WebSite X5 guida fino alla pubblicazione del Sito garantendo semplicità d'uso, flessibilità e ampi spazi di personalizzazione.

In base alle scelte fatte e alle impostazioni definite, WebSite X5 genera in automatico il codice delle Pagine in HTML5 + CSS 2.1 o 3 garantendo, così, piena compatibilità con tutti i Browser e i dispositivi mobili, oltre che una corretta indicizzazione da parte dei Motori di ricerca.

Strumenti Web professionali

Pur essendo estremamente semplice da usare, WebSite X5 mette a disposizione un'ampia gamma di strumenti professionali per:

§Negozi online con carta di credito

§Blog con Podcast e Videocast

§Motore di ricerca interno

§Moduli e-mail con filtri anti-spam

§News e Feed RSS

§Zoom e immagini panoramiche

§Gallerie immagini e video

§Gestione accessi

§Gestione banner pubblicitari

§Creazione di siti multi-lingua

Una soluzione all-in-one

In più, WebSite X5 permette di risparmiare tempo e fatica includendo già tutto ciò che occorre per la creazione di un Sito:

§Editor per i template

§Editor per le immagini

§Generatore dei menu

§Motore FTP interno

§1.500 modelli personalizzabili

§6.000 immagini royalty free

§Librerie di pulsanti

§Raccolta di Widget

Questo mix di semplicità e completezza di prestazioni è il motivo del successo di WebSite X5: il software giusto per chiunque voglia creare Siti Web.


Incomedia WebSite X5: Cosa fa

Introduzione >

Incomedia WebSite X5: Cosa fa

 Return to chapter overview

Incomedia WebSite X5 permette di costruire in modo semplice e veloce Siti Web, carrelli di e-commerce, Blog, album fotografici digitali o presentazioni interattive. I Progetti possono essere sviluppati secondo una struttura reticolare e articolati tramite Menu a livelli: in questo modo il numero delle Pagine inseribili diventa infinito.

L'Utente ha la possibilità di definire l'impaginazione di ciascuna Pagina e di completarla inserendo i diversi Oggetti messi a disposizione dal programma: Testi, Immagini, Tabelle, Gallerie, Video, Suoni, Moduli Invio E-mail, Social network, Guestbook, Mappe, Animazioni Flash™, Elenco Prodotti e Oggetti HTML e Widgets.

WebSite X5 presenta numerose interessanti funzioni per l'editing delle Immagini, in modo da rendere superfluo il ricorso a programmi di grafica esterni. Grazie al salvataggio automatico delle immagini in formato compresso, l'Utente non deve neanche preoccuparsi di ottimizzare le foto prima del loro inserimento.

Il vasto archivio di modelli grafici, l'editor interno per la creazione di pulsanti tridimensionali, le ampie possibilità di personalizzazione grafica, l'introduzione di una intro, l'impostazione della scelta delle lingue di consultazione, la creazione di un'area ad accesso riservato attraverso password, la possibilità di creare e gestire Blog, Feed RSS e negozi on-line abilitati per il pagamento con carta di credito, permettono di arricchire il sito rendendolo completo e professionale.

Alla fine, WebSite X5 consente di pubblicare direttamente in rete il progetto realizzato, senza dover ricorrere a programmi di FTP (File Transfer Protocol) esterni.

Lavorare con WebSite X5

WebSite X5 si presenta come un wizard, ovvero come una condotta guidata visuale, che accompagna, passo dopo passo, nella creazione di un Sito completo, funzionale e graficamente attraente.

I passi che portano dalla semplice idea al Sito pubblicato e visibile su Web sono soltanto 5:

1. Impostazioni Generali

Dopo aver specificato il Progetto a cui lavorare e aver inserito alcune informazioni di carattere generale, tra cui la Descrizione e le Parole Chiave per l'indicizzazione nei Motori di Ricerca, WebSite X5 permette di definire la grafica del Sito. È possibile scegliere fra oltre 1.500 modelli predefiniti o dare libero sfogo alla propria creatività e impostare un proprio Modello da zero. Grazie all'apposito editor interno l'Intestazione e il Piè di Pagina dei Modelli possono essere liberamente personalizzati.

2. Creazione Mappa

Incominciando dalla Home Page, WebSite X5 consente di procedere alla definizione della struttura ad albero del Sito. Si possono prevedere tutti i Livelli di approfondimento necessari per organizzare un numero illimitato di Pagine. In base alla Mappa verrà dinamicamente creato il Menu di navigazione. La Mappa potrà essere modificata in qualsiasi momento in modo da poter effettuare facilmente l'aggiornamento del Sito.

3. Creazione Pagine

La creazione e l'impaginazione di ogni Pagina viene ottenuta con il semplice trascinamento e posizionamento degli Oggetti disponibili: Testi, Tabelle, Immagini, Animazioni, Video e Audio, Gallerie, Moduli per la raccolta dati e l'invio di e-mail, Social Network, Guestbook, Mappa, Elenco Prodotti, Codice HTML e Widget. Gli Oggetti importati possono essere personalizzati e completati con l'inserimento di Collegamenti a risorse sia interne che esterne. Grazie all'editor grafico interno è possibile ruotare, correggere o applicare filtri, maschere e cornici sulle Immagini importate senza ricorrere a software esterni.

4. Impostazioni Avanzate

Per completare la personalizzazione del Sito, è possibile procedere alla definizione dello Stile di elementi come i Menu di navigazione, i Testi, la finestra ShowBox e le E-mail. Grazie ad un apposito editor interno, è possibile procedere alla creazione di Pulsanti tridimensionali per i quali si può prevedere l'effetto corrispondente al passaggio del puntatore del mouse (effetto di mouseover). Inoltre, il Sito può essere completato con strumenti come: Pagina di Benvenuto con colonna sonora e scelta della lingua di consultazione; Aree riservate con gestione delle accessi e degli utenti; Messaggi pubblicitari; Feed RSS; Blog; Carrello di e-commerce.

5. Esportazione

WebSite X5 consente di procedere anche alla pubblicazione in rete del Sito creato: viene avviata una sessione FTP attraverso la quale vengono trasferiti su server tutti i file necessari per rendere il Sito immediatamente visibile sul Web. WebSite X5 supporta la connessione sicura e permette di risparmiare tempo lavorando in multi-connessione e pubblicando solo i file modificati.

Oltre alla pubblicazione su Internet è possibile prevedere l'esportazione del Progetto su un diverso disco del proprio computer o creare agevolmente una copia di backup.


Differenze fra le versioni

Versioni disponibili

Introduzione >

Versioni disponibili

 Return to chapter overview

WebSite X5 è disponibile in diverse versioni fra cui le principali sono: Evolution e Compact.

Per una panoramica delle differenze fra le versioni disponibili consulta la pagina: http://www.websitex5.com/compare


L'ambiente di lavoro

L'ambiente di lavoro >

L'ambiente di lavoro

 Return to chapter overview
Mostra/Nascondi testo nascosto

Proponendosi come una condotta guidata, WebSite X5 si presenta come una serie di finestre attraverso le quali l'Utente giunge ad inserire tutte le informazioni necessarie per creare e pubblicare un Sito Internet completo, funzionale e graficamente accattivante.

Tutte le videate presentate dal Programma sono accomunate da un'identica interfaccia grafica che prevede una pulsantiera superiore, una laterale e una inferiore sempre invariate, e una finestra centrale che cambia in relazione alla fase di lavoro e, di conseguenza, alle informazioni richieste.

Clicca per espandere/ridurre
L'ambiente di lavoro
Clicca per espandere/ridurre Pulsantiera superiore

La Pulsantiera superiore presenta i comandi che è utile avere a disposizione sempre, a prescindere dalla fase di lavoro che si sta affrontando. Tali comandi servono principalmente per richiamare la Guida online e avere informazioni sul funzionamento del programma, per salvare il Progetto e gestirne il Backup, e per visualizzare un'anteprima del progetto nel Browser in locale.

§Guida: richiama la presente Guida in linea. Tramite la freccia a sinistra del pulsante Guida è possibile accedere anche ai comandi:

-Sommario...: richiama la presente Guida in linea.

-Video Tutorial: apre una pagina Web dove vengono proposti alcuni utili Video Tutorial che spiegano come incominciare a lavorare con WebSite X5.

-WebSite X5 Gallery: apre la sezione di WebSite X5 Answers che raccoglie i Siti creati con WebSite X5 che sono stati segnalati direttamente dai loro autori.

-WebSite X5 Templates: apre la sezione di WebSite X5 Answers dedicata ai Template. Presenta nuovi modelli grafici, creati sia da Incomedia sia da altri autori, che possono essere visualizzati e scaricati, sia gratuitamente che a pagamento.

-Supporto Tecnico: apre WebSite X5 Answers, il Sito attraverso il quale viene fornito Supporto Tecnico per WebSite X5. Su WebSite X5 Answers è possibile sia consultare l'archivio delle FAQ e dei tutorial pubblicati, sia aprire un ticket di assistenza.

-www.websitex5.com: apre il Sito Internet di riferimento per WebSite X5.

-Informazioni su WebSite X5: visualizza alcune informazioni generali sulla copia di WebSite X5 installata.

§Salva [CTRL + S]: salva il Progetto corrente. Il Progetto viene automaticamente archiviato nella Cartella dei Progetti specificata nella finestra Preferenze. Tramite la freccia a sinistra del pulsante Salva è possibile accedere anche ai comandi:

-Salva ad ogni Anteprima: salva automaticamente il Progetto ogni volta che si utilizza il comando Anteprima per visualizzare l'anteprima in locale del Sito.

-Crea Backup al primo salvataggio: crea automaticamente una copia di Backup del Progetto (file Backup.iwprj) solo in seguito al primo salvataggio effettuato nella sessione di lavoro corrente.

-Crea Backup ad ogni pubblicazione: crea automaticamente una copia di Backup del Progetto (file Uploaded_timestamp.iwprj) prima di procedere a ogni pubblicazione online del Sito.

Le copie di Backup generate attraverso le funzioni Crea Backup al primo salvataggio e Crea Backup ad ogni pubblicazione vengono salvate nella sotto-cartella Backup presente all'interno della Cartella dei Progetti specificata attraverso la finestra Preferenze.

Per creare una copia del Progetto, invece di usare un comando Salva come, è sufficiente utilizzare il comando Duplica disponibile nella finestra Scelta del Progetto.

-Anteprima: permette di visualizzare tramite il Browser interno un'Anteprima in locale del Sito realizzato.

Se viene lasciata attiva l'opzione Crea le Pagine durante la modifica del Progetto disponibile nella finestra Preferenze, ogni volta che viene portata a termine una modifica (e, per esempio, si clicca su un pulsante OK o su un pulsante Avanti), il Programma ricrea tutto ciò che è stato interessato dalla modifica stessa. Questo permette di mantenere sempre aggiornata l'Anteprima del Sito in locale e di poterla visualizzare senza tempi di attesa.

In più, è possibile attivare anche l'opzione Salva ad ogni Anteprima in modo che cliccando sul pulsante Anteprima viene anche effettuato il salvataggio del Progetto.
Clicca per espandere/ridurre Pulsantiera laterale

WebSite X5 permette di giungere alla realizzazione di un Sito Internet procedendo attraverso soli 5 passi. I pulsanti che rimangono sempre a disposizione nella colonna sinistra della finestra del Programma servono, dunque, per indicare quale fase del processo di creazione del Sito si sta affrontando o per consentire di passare direttamente a una di esse, a prescindere dall'ordine con cui sono presentate.

 | Scelta del Progetto
1. | Impostazioni Generali
2. | Creazione Mappa
3. | Creazione Pagine
4. | Impostazioni Avanzate
5. | Esportazione
Clicca per espandere/ridurre Pulsantiera inferiore

La Pulsantiera inferiore presenta i comandi necessari per muoversi fra le diverse finestre del programma:

§Indietro: torna alla finestra precedente per modificare impostazioni già definite.

§Avanti: passa alla finestra successiva per proseguire nella creazione del Sito.


Benvenuti in Incomedia WebSite X5

L'ambiente di lavoro >

Benvenuti in Incomedia WebSite X5

 Return to chapter overview

Questa finestra di Benvenuto è la prima a cui si accede dopo aver aperto WebSite X5 ed ha la funzione di proporre dei link a risorse e materiali online utili per lavorare al meglio con il software. Nello specifico, questi link sono presentati attraverso una pulsantiera laterale organizzata come segue:

Video Tutorial: apre una pagina Web dove vengono proposti alcuni utili Video Tutorial che spiegano come incominciare a lavorare con WebSite X5.

WebSite X5 Gallery: apre la sezione di WebSite X5 Answers che raccoglie i Siti creati con WebSite X5 che sono stati segnalati direttamente dai loro autori.

WebSite X5 Templates: apre la sezione di WebSite X5 Answers dedicata ai Template. Presenta nuovi modelli grafici, creati sia da Incomedia sia da altri autori, che possono essere visualizzati e scaricati, sia gratuitamente che a pagamento.

WebSite X5 Answers: apre WebSite X5 Answers, il Sito attraverso il quale viene fornito Supporto Tecnico per WebSite X5. Su WebSite X5 Answers è possibile sia consultare l'archivio delle FAQ e dei tutorial pubblicati, sia aprire un ticket di assistenza.

Ricerca Aggiornamenti: verifica la disponibilità di aggiornamenti online per la versione installata di WebSite X5. Per una migliore esperienza di lavoro, consigliamo di effettuare sempre gli aggiornamenti disponibili.

Preferenze: richiama la finestra Preferenze attraverso la quale è possibile impostare alcuni parametri generali inerenti al funzionamento del Programma.

Oltre a questa pulsantiera, la finestra di Benvenuto presenta dei contenuti che, se è attivo il collegamento a Internet, possono essere aggiornati nel tempo proponendo argomenti come: informazioni sullo stato di aggiornamento del Programma installato, News, Contenuti Speciali (Articoli di approfondimento, WhitePaper, Tips&Tricks), nuovi Video Tutorial, offerte e promozioni in corso.

Se non è disponibile il collegamento a Internet, come contenuto della finestra di Benvenuto viene caricata una pagina standard. Questa stessa pagina standard viene proposta anche se viene disattivata l'opzione Cerca aggiornamenti all'avvio del programma disponibile nella finestra Preferenze.

Esplorati i contenuti della finestra di Benvenuto è possibile entrare nel vivo della creazione di un Sito semplicemente cliccando sul pulsante Avvia.


La finestra Preferenze

L'ambiente di lavoro >

La finestra Preferenze

 Return to chapter overview
Mostra/Nascondi testo nascosto

Questa finestra, richiamata dal pulsante Preferenze della Pagina di Benvenuto, permette di impostare alcuni parametri generali inerenti al funzionamento del Programma.

Clicca per espandere/ridurre Reference: I comandi della finestra Preferenze

Le opzioni disponibili nella sezione Generale sono:

§Cartella dei Progetti: è la cartella in cui viene salvato il file di Progetto (file Project.IWPRJ), sia nel caso di creazione di un nuovo Progetto, sia nel caso di importazione di un Progetto già esistente (vedere, Scelta del Progetto | Importa...). Dato che viene qui specificata, cliccando sul pulsante Salva durante il lavoro di sviluppo del Sito, il Progetto verrà salvato senza che venga richiesta la cartella di destinazione.

§Cerca aggiornamenti all'avvio del programma: verifica la disponibilità di aggiornamenti ad ogni avvio del Programma. Per effettuare questa ricerca, il Programma si connette al Server Incomedia via Internet.

Si consiglia di lasciare attiva questa opzione in modo da avere la certezza di lavorare sempre con la versione più aggiornata di WebSite X5.

Le opzioni relative alla Generazione dei file sono:

§Aggiorna Anteprima durante la modifica del Progetto: fa in modo che l'Anteprima del Sito venga costantemente aggiornata, mano a mano che si procede con lo sviluppo del Progetto. Di conseguenza ogni volta che viene portata a termine una modifica (e, per esempio, si clicca su un pulsante OK o su un pulsante Avanti), il Programma aggiorna automaticamente l'Anteprima del Sito visualizzata nel Browser in locale.

§Crea le Pagine durante la modifica del Progetto: fa in modo che le Pagine relative al Sito vengano create già durante la modifica del Progetto. Di conseguenza ogni volta che viene portata a termine una modifica (e, per esempio, si clicca su un pulsante OK o su un pulsante Avanti), il Programma ricrea tutto ciò che è stato interessato dalla modifica stessa. Questo permette di mantenere aggiornata l'Anteprima del Sito in locale e di avviarne la visualizzazione attraverso il pulsante Anteprima senza tempi di attesa.

§Numero massimo di processi simultanei: permette di impostare il numero di processi (o Thread) avviati dal Programma che devono essere eseguiti simultaneamente dal computer.

Cos'è il Multithreading?

La tecnica di suddividere un processo in più processi che poi vengono eseguiti contemporaneamente viene indicata come Multithreading e, per funzionare, deve essere supportata dal computer. In parole semplici, il Multithread cerca di sfruttare al meglio l'unità di calcolo del computer facendogli eseguire più thread in parallelo. Grazie a questa tecnica, quindi, un programma che, come WebSite X5, è stato sviluppato suddividendo il carico di lavoro su più thread può registrare notevoli miglioramenti nelle prestazioni.

Per ottenere un reale vantaggio dal Multithreading occorre valutare la configurazione hardware del computer su cui si lavora. Si consiglia di partire da 5 processi simultanei e provare a modificare tale parametro, incrementandolo progressivamente, in modo da identificare il numero migliore per le proprie esigenze.

Infine, le Impostazioni WebServer per l'anteprima locale su cui è possibile agire sono:

§Porta: è la porta su cui WebSite X5 imposta in ascolto il suo WebServer locale per la visualizzazione dell'anteprima del Sito.

§Indirizzo IP: è l'indirizzo IP su cui WebSite X5 imposta in ascolto il suo WebServer locale per la visualizzazione dell'anteprima del Sito. Di default, viene impostato l'indirizzo IP 127.0.0.1 che identifica sempre il computer locale.

Si consiglia di non modificare i valori delle opzioni Porta e Indirizzo IP se non si è sicuri di ciò che si sta facendo.

Best practice:

- | Come gestire i Progetti in WebSite X5
- | Come gestire il backup dei Progetti


Passo 0 - Scelta del Progetto

Scelta del Progetto

Passo 0 - Scelta del Progetto >

Scelta del Progetto

 Return to chapter overview
Mostra/Nascondi testo nascosto

Avviato WebSite X5, dopo la Pagina di Benvenuto iniziale, si accede alla finestra Scelta del Progetto in cui viene richiesto di specificare a quale Progetto si intende lavorare.

È possibile scegliere se creare un nuovo Progetto o se procedere alla modifica di un Progetto già realizzato in precedenza.

Clicca per espandere/ridurre Reference: I comandi della finestra Scelta del Progetto

§Crea un nuovo Progetto: avvia la creazione di un nuovo Sito di cui occorre specificare subito il nome digitandolo nell'apposito campo sottostante. Sarà possibile salvare il Progetto creato attraverso il pulsante Salva sempre disponibile nella pulsantiera superiore.

Durante le operazioni di salvataggio non è necessario specificare il percorso poiché i Progetti vengono automaticamente gestiti dal Programma e salvati nella Cartella dei Progetti impostata attraverso la finestra Preferenze.

§Modifica un Progetto già esistente: avvia l'apertura di un Progetto creato in precedenza in modo da poter procedere alla sua modifica o aggiornamento. Tutti i Progetti già esistenti vengono visualizzati nell'apposita lista. Per selezionare più facilmente il Progetto da aprire, è possibile utilizzare i seguenti comandi:

Visualizzazione Icone grandi - Visualizzazione Titoli - Visualizzazione Lista - Visualizzazione Dettagli

Definiscono la modalità di visualizzazione delle anteprime dei Progetti.

Mostra Gruppi in base alla data dell'ultima modifica

Fa in modo che i Progetti vengano raggruppati e visualizzati in base alla data dell'ultima modifica.

I Progetti possono essere gestiti attraverso i seguenti comandi:

§Importa...: importa un Progetto precedentemente creato ed esportato (vedere, Esporta il Progetto) con WebSite X5 da un PC diverso.

§Rinomina: modifica il nome del Progetto selezionato. È anche possibile cliccare una seconda volta su un Progetto già selezionato per poterlo rinominare.

§Duplica: crea una copia del Progetto selezionato.

§Elimina: elimina il Progetto selezionato.

Best practice:

- | Come gestire i Progetti in WebSite X5
- | Come gestire il backup dei Progetti


Impostazioni Generali

Passo 1 - Impostazioni Generali >

Impostazioni Generali

 Return to chapter overview
Mostra/Nascondi testo nascosto

Questa finestra iniziale, la prima del Passo 1, ha l'obiettivo di raccogliere attraverso opportuni campi alcune informazioni necessarie per configurare i parametri di base del Progetto a cui si sta lavorando.

È importante, per esempio, definire un titolo, specificare la URL, impostare una lingua e prevedere codici e metatag necessari per l'attivazione di servizi aggiuntivi come quello per le statistiche di accesso. Tutti questi parametri possono essere impostati subito o anche in un secondo momento.

Nello specifico, le opzioni disponibili sono organizzate in due sezioni: Base e Esperto.

Clicca per espandere/ridurre Reference: Le opzioni della Sezione Base

§Titolo del Sito: campo per digitare il titolo da dare al Sito. Questo titolo verrà visualizzato nella Barra del titolo del Browser ed è, ovviamente, un parametro importante per permettere a Utenti e Motori di ricerca di individuare correttamente il Sito.

Come Titolo del Sito viene automaticamente ripreso il nome assegnato al Progetto (vedere: Scelta del Progetto): in qualsiasi caso, il Titolo del Sito può essere modificato e stabilito in base all'argomento trattato e alle specifiche esigenze di ottimizzazione.

§Autore del Sito: campo per digitare il nome della persona o della società che deve figurare come autore del Sito. Il nome dell'autore viene riportato nel codice HTML delle pagine realizzate come valore del metatag <author>: in questo modo si appone la firma sul lavoro fatto.

§Indirizzo URL del Sito: campo per specificare l'indirizzo URL (per esempio, http://www.miosito.it) al quale sarà raggiungibile il Sito una volta pubblicato. Questa informazione è necessaria per il corretto funzionamento di eventuali Feed RSS, del Carrello di e-commerce e della SiteMap che viene automaticamente creata e collegata dal Programma.

§Descrizione del Sito: campo per digitare una breve descrizione del Sito. È bene che il contenuto della descrizione sia conciso, efficace e significativo per il Sito a cui fa riferimento: questa descrizione, infatti, verrà utilizzata nel codice HTML come contenuto del metatag <description> e sarà analizzata dagli spider dei Motori di ricerca.

§Parole Chiave per la ricerca: campo per digitare un elenco di parole chiave (fra loro separate da una virgola) importanti per il Sito. Le parole chiave verranno inserite nel codice HTML come valore del metatag <keywords> e potranno essere utilizzate dai Motori di ricerca.

La Descrizione del Sito e la lista di Parole Chiave per la ricerca inserite attraverso questi campi vengono automaticamente associate alla Home Page del Sito.

Per una migliore ottimizzazione del Sito è però consigliabile associare a ciascuna Pagina, o almeno alle più importanti, una Descrizione e un elenco di Parole chiave specifici. Per far questo è sufficiente accedere alla finestra Creazione della Mappa, selezionare la Pagina su cui si vuole lavorare e cliccare sul comando Proprietà....

§Lingua dei contenuti: specifica quale Lingua impostare per il Sito. In base alla Lingua scelta, viene utilizzata la corrispondente versione dei testi inseriti in automatico dal programma: link ad Ancore interne, etichette dell'Oggetto Modulo Invio E-mail, etichette e testi dei Carrello di e-commerce, testi della Mappa del Sito.

Per poter agire sui testi inseriti in automatico dal Programma o aggiungere nuove lingue è sufficiente cliccare sul pulsante [image] e utilizzare le opzioni disponibili nella finestra richiamata Gestione Contenuti in Lingua.

§Icona per il Sito: specifica quale icona (file .ICO, .PNG, .GIF e .JPG) associare alle pagine Web del Sito. Questa icona verrà visualizzata alla sinistra della URL nella barra degli indirizzi del Browser Internet.

Come icona associata a un Sito (o favicon, dall'inglese favorites icon) può essere utilizzate un'immagine in formato .ICO, .PNG, .GIF e .JPG. Mentre i file .ICO vengono importati così come sono, per i file in formato .PNG, .GIF e .JPG, di qualsiasi dimensioni essi siano, WebSite X5 crea automaticamente una copia come file .PNG di 16x16 pixel e utilizza tale copia come favicon.
Clicca per espandere/ridurre Reference: Le opzioni della sezione Esperto

§Codice personalizzato: definisce la posizione all'interno del codice HTML della Pagina in cui deve essere inserito il codice personalizzato: Prima dell'apertura del tag HTML, Prima della chiusura del tag HEAD, Proprietà del tag BODY (es: style, onload, ecc) (ovvero all'interno dell'istruzione <BODY>, ad esempio: <BODY onload="alert('Hello!')">), Prima della chiusura del tag BODY, Dopo la chiusura del tag BODY. Selezionata la posizione, è disponibile un campo in cui digitare o incollare la porzione di codice che deve essere inserita all'interno del codice HTML della Pagina creato in automatico dal Programma.

Questo campo può essere utilizzato, per esempio, per attivare un servizio di statistiche sugli accessi al Sito come Google Analytics™.

Per maggiori informazioni sul servizio Google Analytics™ e per ottenere un account, cliccare su pulsante [image] e accedere al Sito ufficiale: http://www.google.it/analytics/.

§Metatag di verifica per Google Webmaster Central: campo per inserire il metatag di verifica necessario per poter utilizzare gli strumenti messi a disposizione da Google Webmaster Central™.

Per maggiori informazioni sul servizio Google WebMaster Central™ e per ottenere un account, cliccare su pulsante [image] e accedere al Sito ufficiale: http://www.google.com/webmasters/.

§Crea automaticamente la SiteMap: attiva di default, fa in modo che venga automaticamente creata e collegata la SiteMap del Sito.

Perché la SiteMap venga costruita e funzioni correttamente è necessario indicare un indirizzo URL valido nel campo Indirizzo URL del Sito presente in Impostazioni Generali | Base.

§Attiva protezione accesso codice HTML: attiva la protezione sulle Pagine del Sito pubblicato disabilitando il click del tasto desto del mouse. In questo modo il Visitatore non può accedere al codice sorgente delle pagine online attraverso i comandi del menu contestuale richiamato cliccando con il tasto destro del mouse sulle pagine stesse.

Best practice:

- | Come gestire le Lingue per i testi inseriti in automatico
- | Cosa fare per usare Google Webmaster Central™
- | Come attivare un servizio di statistiche come Google Analytics™

-

Come creare e collegare la SiteMap del Sito

Approfondimenti:

- | HTML, HTML5 e CSS
- | Il Browser Web e il Browser di WebSite X5
- | Motori di Ricerca e Ottimizzazione SEO


Come gestire le Lingue per i testi inseriti in automatico

Finestra Gestione Contenuti in Lingua

Passo 1 - Impostazioni Generali > Impostazioni Generali >

Finestra Gestione Contenuti in Lingua

 Return to chapter overview

Questa finestra, richiamata cliccando sul pulsante [image] relativo all'opzione Lingua dei contenuti presente nella finestra Impostazioni Generali | Base, permette di gestire i testi che vengono inseriti automaticamente dal Programma come, per esempio, i link ad Ancore interne, i Pulsanti dell'Oggetto Galleria, le etichette dell'Oggetto Modulo Invio E-mail, le etichette e i testi dei Carrello di e-commerce, i testi della Mappa del Sito.

La finestra Gestione Contenuti in Lingua presenta, sulla sinistra, l'elenco delle Lingue disponibili e, sulla destra, una Tabella con le traduzioni nelle diverse Lingue. La prima colonna della Tabella riporta una descrizione utile per identificare dove le diverse voci vengono utilizzate; seguono una colonna per ciascuna Lingua attiva. Per Lingua attiva si intende una Lingua sulla quale è stato apposto il segno di spunta fra quelle presenti nell'elenco delle Lingua disponibili. È, dunque, possibile lavorare direttamente su questa Tabella per modificare o aggiungere voci.

La finestra Gestione Contenuti in Lingua presenta i seguenti pulsanti:

Aggiungi una nuova Lingua: aggiunge, attraverso la finestra di dialogo richiamata, il nome di una nuova Lingua da creare. Il nome della Lingua deve essere inserito rispettando il seguente formato: "ID - NomeLingua", per esempio "EN - English".

Rimuovi la Lingua selezionata: elimina la Lingua selezionata dall'elenco.

Importa una nuova Lingua: importa una nuova Lingua, salvata come file .XML, aggiungendola all'elenco delle Lingue disponibili.

Esporta la Lingua selezionata: esporta la Lingua selezionata dall'elenco in un file .XML.

I comandi Esporta la Lingua selezionata e Importa una nuova Lingua sono utili per salvare in un file .XML le voci localizzate in una determinata Lingua e per poterle spostare su un PC diverso.

Best practice:

- | Come gestire le Lingue per i testi inseriti in automatico
- | Come creare un Sito multi-lingua


Scelta del Modello

Passo 1 - Impostazioni Generali >

Scelta del Modello

 Return to chapter overview
Mostra/Nascondi testo nascosto

Uno dei fattori che concorrono a determinare il successo di un Sito Web è il layout grafico. Ancor prima di arrivare ai contenuti e alla struttura di navigazione, infatti, l'aspetto del Sito colpisce il Visitatore, influenzando in maniera determinante il giudizio che se ne farà. È facile comprendere che un design curato e professionale verrà interpretato come un indizio di un Sito di qualità, del quale varrà la pena approfondire i contenuti.

WebSite X5 permette di definire l'aspetto del Sito procedendo in due diversi modi:

1.creando un Modello Personalizzato partendo da zero o da uno dei modelli predefiniti;

2.utilizzando un Modello Predefinito scegliendolo dalla galleria di oltre 1.500 template già installati con il Programma.

Sia i Modelli Personalizzati che i Modelli Predefiniti potranno poi essere completati e arricchiti attraverso le numerosi funzioni messe a disposizione dall'Editor proposto nella finestra Modifica del Modello.

Tutti i Modelli Predefiniti sono ottimizzati per una visualizzazione a 1024 x 768 pixel. Se si desidera realizzare un sito ottimizzato con una risoluzione diversa, è necessario utilizzare il Modello Personalizzato.
Clicca per espandere/ridurre Reference: I comandi della finestra Scelta del Modello

La maggior parte della finestra Scelta del Modello è dedicata alla visualizzazione dei Modelli disponibili. Per agevolare la scelta del Modello da utilizzare è possibile utilizzare i seguenti comandi che definiscono quali Modelli e come devono essere visualizzati:

Elenco Categorie

Propone l'elenco delle categorie in cui sono organizzati i Modelli, in modo da permettere di scegliere quali visualizzare. La prima categoria Personalizzati comprende tutti i Modelli Personalizzati che vengono creati da zero e viene visualizzata solo se almeno uno è presente. Le categorie seguenti raccolgono, invece, i Modelli Predefiniti disponibili.

Menu

Filtra i Modelli Predefiniti in base al tipo di Menu che presentano, in modo da permettere di scegliere se visualizzare quelli con menu orizzontale, verticale o tutti.

Visualizza anteprima piccole - Visualizza anteprima medie - Visualizza anteprima grandi

Definiscono la modalità di visualizzazione delle anteprime dei Modelli.

Modifica tonalità del Modello

Richiama la finestra Tonalità del Modello per virare i colori del Modello selezionato verso la tonalità impostata.

Per lavorare sui Modelli, invece, è possibile utilizzare i seguenti comandi:

§Nuovo Modello: avvia la creazione di un nuovo Modello Personalizzato partendo da zero. I Modelli così creati vengono proposti all'interno della categoria Personalizzati.

§Rinomina: rinomina il Modello selezionato. Il comando è disponibile solo per i Modelli Personalizzati: non è possibile cambiare il nome dei Modelli Predefiniti. È anche possibile cliccare una seconda volta su un Modello Personalizzato già selezionato per poterlo rinominare.

§Duplica: crea una copia del Modello selezionato.

§Rimuovi: elimina il Modello selezionato. Il comando è disponibile solo per i Modelli Personalizzati: non è possibile cancellare i Modelli Predefiniti.

§Modifica...: apre il Modello selezionato nella finestra Modifica del Modello, in modo da poterlo modificare. Il comando è disponibile solo per i Modelli Personalizzati: se si vuole modificare un Modello Predefinito occorre prima crearne una copia attraverso il pulsante Duplica.

§Importa...: importa un nuovo Modello (file .IWTPL) creato con WebSite X5 ed esportato con l'apposita funzione.

§Esporta...: esporta il Modello selezionato (file .IWTPL) nella cartella specificata. Il Modello così esportato potrà essere condiviso e importato su altri PC.

Note sulla compatibilità con le versioni precedenti:

§Menu Orizzontale / Verticale - Mentre nelle versioni precedenti la scelta tra Menu Orizzontale e Menu Verticale veniva effettuata nella finestra Scelta del tipo di menu (fino alla versione 8) o attraverso un'apposita opzione (nella versione 9), nell'attuale versione 10 è sufficiente selezionare il Modello Predefinito che prevede il Menu posizionato adeguatamente. Se si crea un Modello Personalizzato, invece, occorre impostare il Tipo di Menu attraverso l'apposita opzione.

§Varianti - Nella versione 8, per ciascun Modello predefinito erano disponibili 4 Varianti di colore. Nella successiva versione 9 le Varianti di colore sono state sostituite dalle Varianti di stile che si distinguevano dalle prime perché non presentavano solo palette di colori diverse, ma anche impostazioni ed elementi grafici differenti. Nell'attuale versione 10, non è più mantenuta la distinzione in Varianti di stile: tutti i Modelli si distinguono per la presenza di elementi e/o impostazioni peculiari e sono inseriti all'interno dell'elenco complessivo.

Best practice:

- | Come lavorare con i Modelli
- | Dove trovare nuovi Modelli per WebSite X5


tonalita

Scelta del Modello | Tonalità del Modello

Passo 1 - Impostazioni Generali > Scelta del Modello >

Scelta del Modello | Tonalità del Modello

 Return to chapter overview

Questa finestra, richiamata attraverso il pulsante [image] presente nella finestra Scelta del Modello, permette di virare verso la tonalità desiderata i colori del Modello Predefinito o Personalizzato su cui si sta lavorando.

Per impostare la tonalità verso la quale i colori del Modello devono virare è sufficiente spostare il cursore del controllo Tonalità.

Grazie a questa opzione le varianti grafiche di un Modello diventano potenzialmente infinite.

Il viraggio interessa tutti gli elementi che compongono il Modello ma non ha effetti visibili su colori come il bianco, il nero e le tonalità di grigio.

Best practice:

- | Come lavorare con i Modelli
- | Dove trovare nuovi Modelli per WebSite X5


Modello Personalizzato

Passo 1 - Impostazioni Generali >

Modello Personalizzato

 Return to chapter overview
Mostra/Nascondi testo nascosto

WebSite X5 consente di creare un proprio Modello di stile personalizzato partendo da zero. Per farlo è sufficiente cliccare sul pulsante Nuovo Modello presente nella finestra Scelta del Modello in modo da far comparire l'anteprima di un nuovo Modello nella categoria Personalizzati: facendo doppio click direttamente su questa anteprima si accede alla finestra Modello Personalizzato e si può procedere alla creazione del Modello.

Per facilitare il lavoro, la finestra Modello Personalizzato offre un'Anteprima in cui viene visualizzata una rappresentazione schematica della Pagina. È possibile scegliere la sezione da modificare dalla lista oppure è anche possibile cliccare direttamente sulle diverse aree della struttura nell'Anteprima della Pagina per poterle selezionare, modificarne l'aspetto attraverso gli appositi comandi e vedere subito il risultato delle azioni eseguite.

Clicca per espandere/ridurre Reference: I comandi per impostare il Tipo di Menu

Innanzi tutto, per procedere alla creazione di un Modello personalizzato è necessario specificare il Tipo di Menu, ovvero dove e come deve essere posizionato il Menu di navigazione all'interno di tutte le Pagine del Sito. Le possibili alternative sono:

Orizzontale - Menu sopra l'Intestazione

Orizzontale - Menu sotto l'Intestazione

Verticale - Menu a sinistra

Verticale - Menu a destra
Clicca per espandere/ridurre Reference: I comandi per selezionare le Sezioni della Pagina

Scelto il tipo di Menu, occorre selezionare la Sezione della Pagina sulla quale si vuole lavorare. Le sezioni in cui è suddivisa la Pagina sono:

Sfondo della Pagina: è l'area esterna alla Pagina e viene visualizzata quando la finestra del Browser viene aperta con dimensioni superiori rispetto alla risoluzione del Sito.

Sfondo dell'Intestazione: è la parte dello Sfondo della Pagina che sta dietro all'Intestazione.

Intestazione: è l'header, una sezione prevalentemente grafica ideale per ospitare elementi come titolo e sottotitolo del Sito, logo aziendale, campi di ricerca, menu di servizio con i link, per esempio, per la visualizzazione della mappa o per la scelta della lingua di consultazione.

Menu: è l'area destinata ad ospitare la navigazione fissa, ovvero le voci di primo livello del menu che devono essere presenti, inalterate, in ogni pagina del Sito. La posizione di quest'area, ovviamente, varia in base alla struttura del Sito scelta.

Contenuto della Pagina: è l'area destinata ad ospitare il contenuto vero e proprio delle Pagine ed, eventualmente, i sottomenu di navigazione.

Piè di Pagina: è il footer, altra sezione prevalentemente grafica che ha lo scopo di chiudere visivamente la Pagina. In genere, in quest'area trovano collocazione elementi come note, disclaimer, copyright, partita IVA, indirizzi e-mail.

Sfondo del Piè di Pagina: è la parte dello Sfondo della Pagina che sta dietro al Piè di Pagina.

Se si imposta lo Sfondo dell'Intestazione o lo Sfondo del Piè di Pagina come Trasparente, questi vengono trattati come parte integrante dello Sfondo della Pagina e ne assumono lo stesso aspetto. In caso contrario, si ottengono delle bande per l'Intestazione e/o il Piè di Pagina che occupano tutta la larghezza della finestra del Browser.
Clicca per espandere/ridurre Reference: Le opzioni per definire le Proprietà grafiche

Per tutte le sezioni della Pagina è possibile agire sulle seguenti Proprietà grafiche:

§Colore: specifica il colore da utilizzare come riempimento dello sfondo.

§File Immagine: seleziona il file grafico (.JPG, .GIF, .PNG.) relativo all'immagine da utilizzare come sfondo. Nel caso dell'Intestazione o del Piè di Pagina è possibile prevedere anche un'animazione Flash (.SWF).

§Disposizione: specifica se l'immagine inserita come sfondo deve essere ripetuta o meno. L'immagine può essere ripetuta solo in senso orizzontale, solo in senso verticale o in entrambe i sensi, in modo da giungere ad occupare l'intero spazio a disposizione. In più, solo per la sezione Sfondo della Pagina, è possibile fare in modo che l'immagine venga adattata, ovvero ridimensionata in modo da coprire tutto lo sfondo: in questo caso, possono non venir rispettate le proporzioni originali.

§Allineamento: definisce come deve essere allineata l'immagine inserita rispetto all'area della Pagina selezionata.

Solo per l'area Sfondo della Pagina è disponibile l'opzione:

§Immagine di sfondo fissa: attivando questa opzione, l'immagine inserita come sfondo della Pagina viene mantenuta fissa anche quando il contenuto della Pagina viene fatto scorrere mediante la barra di scroll.
Clicca per espandere/ridurre Reference: Le opzioni per definire le Dimensioni

Per alcune aree della Pagina è possibile specificare anche le Dimensioni.

Per le aree Intestazione e Menu è disponibile l'opzione:

§Larghezza: riporta il valore espresso in pixel della larghezza dell'area della Pagina selezionata. Per il Tipo di Menu Verticale, il valore della Larghezza è impostato di default a 960 pixel per la sezione Intestazione e a 120 pixel per la sezione Menu ma, in qualsiasi caso, è liberamente modificabile. Per il Tipo di Menu Orizzontale, invece, il valore della Larghezza impostato per l'Intestazione viene automaticamente ripreso anche per il Menu, il Contenuto della Pagina e il Piè di Pagina.

Il valore della Larghezza impostato di default è calcolato per ottenere un Sito ottimizzato per una visualizzazione a 1024x768 pixel.

Per tutte le aree, ad eccezione dello Sfondo della Pagina e del Contenuto della Pagina, è disponibile l'opzione:

§Altezza: riporta il valore espresso in pixel dell'altezza dell'area della Pagina selezionata.

Solo per l'area Contenuto della Pagina è, invece, disponibile l'opzione:

§Altezza minima: riporta il valore espresso in pixel dell'altezza minima che l'area della Pagina destinata ad ospitare i contenuti deve avere, a prescindere dall'altezza dei contenuti effettivamente inseriti.
Clicca per espandere/ridurre Reference: Le opzioni per definire le Proprietà dei contenuti

Infine, sempre solo per alcune aree della Pagina è possibile impostare delle Proprietà Contenuti.

Per le sezioni Sfondo della Pagina, Menu e Contenuto della Pagina è disponibile l'opzione:

§Margini: specifica il valore in pixel da impostare per i margini. Il margine è lo spazio vuoto tra il bordo della sezione e il suo contenuto.

Solo per le sezioni Sfondo della Pagina e Menu è disponibile anche l'opzione:

§Allineamento: per lo Sfondo della Pagina, specifica come deve essere allineata la Pagina rispetto alla finestra del Browser; per il Menu, invece, specifica come devono essere allineati i pulsanti che lo compongono rispetto alla Pagina.

L'effettiva larghezza delle Pagine del Sito è data dalla larghezza della sezione Contenuto della Pagina (dipendente da quella dell'area Intestazione) meno il margine sinistro e il margine destro.

L'intestazione del modello realizzato può essere completato con l'inserimento di testi, immagini, animazioni Flash, SlideShow, campi di ricerca e collegamenti: le opzioni necessarie sono presentate nella finestra Modifica del Modello a cui si accede cliccando sul pulsante Avanti.

Best practice:

- | Come lavorare con i Modelli
- | Dove trovare nuovi modelli per WebSite X5


Modifica del Modello

Passo 1 - Impostazioni Generali >

Modifica del Modello

 Return to chapter overview
Mostra/Nascondi testo nascosto

Dopo aver scelto uno dei Modelli predefiniti nella finestra Scelta del Modello o dopo aver creato un Modello da zero attraverso la finestra Modello Personalizzato, si accede alla finestra Modifica del Modello. Attraverso le sezioni Intestazione e Piè di Pagina di questa finestra è possibile personalizzare, rispettivamente, l'Intestazione e/o il Piè di Pagina del Modello stesso aggiungendo Testi, Immagini, Animazioni Flash, SlideShow, Codice HTML, Campi di Ricerca e Collegamenti.

Sia lavorando sull'immagine dell'Intestazione che su quella del Piè di Pagina, i comandi e le opzioni disponibili sono identici.

Se nelle sezioni Intestazione o Piè di Pagina è inserita come sfondo un'Animazione Flash, la finestra Modifica del Modello non ne permette la personalizzazione.
Clicca per espandere/ridurre Reference: Come si presenta l'editor del Modello

La finestra Modifica del Modello presenta un editor grafico all'interno del quale, subito sotto la Barra Strumenti, viene automaticamente ripresa l'immagine utilizzata come sfondo dell'Intestazione o del Piè di Pagina del modello scelto (sia predefinito che personalizzato): l'immagine viene visualizzata in scala 1:1 e, se necessario, può essere fatta scorrere attraverso l'apposita barra di scroll orizzontale. Su questa immagine vengono visualizzate in tempo reale tutte le modifiche apportate attraverso i comandi disponibili.

Subito sotto l'immagine caricata è presente una Barra di Stato in cui viene riportato:

§Posizione: visualizza le coordinate x e y che identificano la posizione dell'angolo superiore destro dell'Oggetto selezionato.

§Dimensione: visualizza il valore espresso in pixel della larghezza e dell'altezza dell'Oggetto selezionato.
Clicca per espandere/ridurre Reference: I comandi della Barra Strumenti

I comandi della Barra Strumenti permettono di inserire nuovi Oggetti nell'Intestazione / Piè di Pagina del Modello e di gestirne alcune impostazioni. Una volta inserito un Oggetto attraverso l'apposito comando, è poi possibile selezionarlo e modificarlo attraverso le opzioni presenti nel riquadro che prende il nome dell'Oggetto stesso.

Taglia [CTRL+X] - Copia [CTRL+C] - Incolla [CTRL+V]

Rispettivamente, tagliano, copiano e incollano l'Oggetto selezionato.

Annulla [CTRL+Z]

Annulla l'ultima azione eseguita.

Porta in primo piano - Porta in secondo piano

Portano l'Oggetto selezionato in primo o in secondo piano, ovvero sopra o sotto tutti gli altri Oggetti eventualmente sovrapposti.

Associa un Collegamento

Imposta un link sul testo, sull'immagine o sulle immagini dello SlideShow selezionate. È possibile definire le impostazioni del collegamento attraverso la finestra richiamata Collegamento.

Posizione e Dimensioni

Definisce, attraverso la finestra richiamata, le coordinate che determinano la posizione e le dimensioni dell'Oggetto selezionato. L'opzione Mantieni proporzioni, attiva di default, fa in modo che nelle operazioni di ridimensionamento vengano mantenute le proporzioni originarie dell'Oggetto.

Inserisci Testo - Inserisci Immagine - Inserisci Animazione Flash - Inserisci SlideShow - Inserisci Codice HTML - Inserisci Campo di Ricerca

Rispettivamente, inseriscono un Testo, un'Immagine, un'Animazione Flash, uno SlideShow, del codice HTML o un Campo di Ricerca.

Lo SlideShow è costituito da una sequenza di immagini che scorrono automaticamente una di seguito all'altra: può essere utile per creare dei banner anche a scopo pubblicitario.

Attraverso l'inserimento di Codice HTML è possibile aggiungere qualsiasi tipo di contenuto: in questo modo si può andare ben oltre le possibilità offerte dai comandi.

Infine, il Campo di Ricerca sfrutta un Motore interno per permettere al Visitatore di compiere delle ricerche sui contenuti dell'intero Sito.

Le Animazione Flash e gli Oggetti Codice HTML inseriti vengono visualizzati solo quando il Sito viene aperto nel Browser.
Clicca per espandere/ridurre Reference: I comandi del Riquadro Intestazione / Piè di Pagina

Cliccando direttamente sull'immagine di sfondo delle sezioni Intestazione e Piè di Pagina la si seleziona e diventa possibile agire sulle seguenti opzioni:

§Salva come immagine in formato JPG: in fase di creazione del Sito, gli Oggetti Testo e gli Oggetti Immagine aggiunti nell'Intestazione/Piè di Pagina verranno fusi con l'immagine di sfondo utilizzata che sarà automaticamente salvata come un nuovo file in formato PNG. La scelta del formato .PNG permette di mantenere eventuali trasparenze impostate. Se non occorre gestire trasparenze particolari, è possibile attivare l'opzione Salva come immagine in formato JPG per ottenere un'immagine di sfondo di dimensioni inferiori.
Clicca per espandere/ridurre Reference: I comandi del Riquadro Testo

Selezionando un Oggetto Testo inserito nella sezione Intestazione / Piè di Pagina è possibile agire sulle seguenti opzioni:

§Contenuto: campo per digitare o incollare il contenuto del testo.

§Tipo di Font: definisce il tipo di carattere, lo stile e la dimensione in punti per il testo.

§Colore Testo / Colore Sfondo: definisce il colore per la scritta e per lo sfondo del testo inserito.

§Salva come immagine in formato PNG: se attivata, fa in modo che il testo inserito non venga "fuso" con l'immagine di sfondo dell'Intestazione/Piè di Pagina ma venga invece salvato come un'immagine .PNG con sfondo trasparente. In questo caso, il testo originario viene automaticamente associato come Testo Alternativo (ALT text) all'immagine .PNG.
Clicca per espandere/ridurre Reference: I comandi del Riquadro Immagine

Selezionando un Oggetto Immagine inserito nella sezione Intestazione / Piè di Pagina è possibile agire sulle seguenti opzioni:

§File Immagine: seleziona il file grafico relativo all'immagine da inserire. Possono essere utilizzati file in formato .JPG, .GIF, .PNG, .BMP, .PSD, .TIF, .DIB, .PCX, .RLE, .TGA, .WMF.

§File Immagine su passaggio del mouse: seleziona un secondo e diverso file grafico che verrà visualizzato al passaggio del mouse sull'immagine stessa. Questa opzione è particolarmente utile per la creazione di pulsanti con effetto premuto/rilasciato (effetto mouseover).

§Abilita Trasparenza: applica la trasparenza sull'immagine, rendendo non visibile il colore specificato.

§Colore Trasparenza: specifica qual'è il colore dell'immagine inserita che deve essere reso invisibile se viene attivata l'opzione Abilita Trasparenza. In questi casi, è utile lo strumento "contagocce" che permette di catturare il colore direttamente dall'immagine.

§Tolleranza: specifica il fattore di tolleranza per applicare la trasparenza. Maggiore è il valore impostato per la tolleranza, più ampia sarà l'area dell'immagine resa trasparente.
Clicca per espandere/ridurre Reference: I comandi del Riquadro Animazione Flash

Selezionando un Oggetto Animazione Flash inserito nella sezione Intestazione / Piè di Pagina è possibile agire sulle seguenti opzioni:

§File Animazione: seleziona il file .SWF relativo all'Animazione Flash da inserire.

§Sfondo Trasparente: rende non visibile lo sfondo dell'Animazione.
Clicca per espandere/ridurre Reference: I comandi del Riquadro SlideShow

Selezionando un Oggetto SlideShow inserito nella sezione Intestazione / Piè di Pagina è possibile agire sulle seguenti opzioni:

§Lista di immagini da visualizzare: visualizza la lista delle immagini che compongono lo SlideShow. Per ogni immagine inserita, viene riportato il percorso del file oltre che, se presenti, l'indicazione dell'effetto e del collegamento associati. Selezionando un file della lista se ne ottiene la visualizzazione nell'anteprima. È anche possibile effettuare una selezione multipla dei file utilizzando i comandi CTRL + click e SHIFT + click.

§Aggiungi... / Rimuovi: aggiungono nuove immagini o eliminano le immagini selezionate dalla lista di quelle che compongono lo SlideShow. La finestra di Selezione File richiamata consente di selezionare anche più file contemporaneamente.

§Sposta sopra / Sposta sotto: agiscono sull'ordine di visualizzazione delle immagini già inserite nella Lista di immagini da visualizzare nello SlideShow, spostando verso l'alto o verso il basso quella selezionata.

§Effetto...: richiama la finestra Proprietà Effetto attraverso la quale è possibile impostare effetti di entrata, movimento, zoom per le immagini dello SlideShow selezionate, fra quelle presenti nella Lista di immagini da visualizzare.

§Avvio automatico: fa partire in automatico lo SlideShow non appena il Sito viene caricato nel Browser.

§Visualizza in ordine casuale: fa in modo che le immagini inserite nello SlideShow vengano riprodotte in ordine casuale e non in base all'ordine di inserimento nella Lista di immagini da visualizzare.
Clicca per espandere/ridurre Reference: I comandi del Riquadro Codice HTML

Selezionando un Codice HTML inserito nella sezione Intestazione / Piè di Pagina è possibile agire sulle seguenti opzioni:

§Codice HTML: campo per digitare o incollare il codice HTML relativo all'Oggetto che si vuole creare. La Barra Strumenti presente mette a disposizione i seguenti comandi:

Taglia [CTRL+X] - Copia [CTRL+C] - Incolla [CTRL+V]

Tagliano, copiano e incollano il testo selezionato.

Annulla [CTRL+Z] - Ripristina [ALT+MAIUSC+BACKSPACE]

Annullano e ripristinano l'ultima operazione eseguita/annullata.

Inserisci Widgets

Inserisce il codice relativo alla Widget selezionata: cliccando sulla freccia a lato del pulsante, è possibile visualizzare la lista di tutte le Widgets disponibili, riprese dall'elenco dell'Oggetto HTML e Widgets. Facendo click sulla Widget desiderata viene richiamata la finestra Widget attraverso la quale è possibile definire i parametri previsti. Confermando, il codice HTML relativo alla Widget viene composto e automaticamente inserito nell'editor.

§Visualizza Barre di Scorrimento: attiva la visualizzazione delle barre di scorrimento.

Note sulla compatibilità con le versioni precedenti:

Nella precedente versione 9, l'editor di questo Codice HTML consentiva di inserire automaticamente delle Snippets (brevi stringhe di codice). Nell'attuale versione 10, invece, le snippets sono state arricchite e incorporate nell'elenco delle Widgets.
Clicca per espandere/ridurre Reference: I comandi del Riquadro Campo di Ricerca

Selezionando il Campo di Ricerca inserito nella sezione Intestazione / Piè di Pagina è possibile agire sulle seguenti opzioni:

§Etichetta Pulsante: è il testo visualizzato all'interno del pulsante che lancia la ricerca.

§Tipo di Font: definisce il tipo di carattere, lo stile e la dimensione in punti per il testo.

§Colori Campo: definisce il colore per il testo e per lo sfondo del campo.

§Colori Pulsante: definisce il colore per il testo e lo sfondo del pulsante.

§Inserendo un Campo di Ricerca nella sezione Intestazione / Piè di Pagina del Modello, viene automaticamente visualizzata sulla Mappa la Pagina Speciale "Cerca": è possibile selezionarla e richiamare la finestra Proprietà Pagina per definirne le proprietà principali.

§I risultati delle ricerche effettuate all'interno del Sito vengono restituiti in Pagine create automaticamente dal Programma: l'aspetto grafico di tali Pagine è stabilito sulla base delle impostazioni di stile dei testi (vedi Stili e Modelli nel Passo 4 - Impostazioni Avanzate).

Clicca per espandere/ridurre Reference: I comandi del Riquadro Effetti

Selezionando un Oggetto Testo, un Oggetto Immagine o un Oggetto SlideShow inserito nella sezione Intestazione / Piè di Pagina è possibile agire sulle seguenti opzioni:

§Tipo di Effetto: permette di selezionare e attivare uno o più effetti da applicare sull'Oggetto selezionato.

Su ciascun Oggetto Testo, Immagine e SlideShow possono essere applicati anche più effetti contemporaneamente; per ogni effetto è possibile agire su diverse impostazioni:

Effetto

Impostazioni

Ombra

§Diffusione: definisce quanto deve essere diffusa l'ombra da applicare.

§Colore: definisce il colore dell'ombra da applicare.

§Distanza X / Distanza Y: definisce di quanto deve essere spostata orizzontalmente l'ombra rispetto all'oggetto a cui viene applicata. Inserendo un valore positivo si ottiene uno spostamento dell'ombra, rispettivamente, verso destra o verso il basso; al contrario, inserendo un valore negativo si ottiene uno spostamento dell'ombra verso sinistra o verso l'alto.

Riflesso

§Diffusione: definisce quanto deve essere diffuso, ovvero quanto deve essere grande, il riflesso da applicare.

§Distanza: definisce quanto deve essere distante il riflesso rispetto all'oggetto a cui si applica.

Bordo colorato

§Spessore: definisce il valore in pixel dello spessore del bordo da applicare.

§Colore: definisce il colore del bordo da applicare.

Bagliore esterno

§Diffusione: definisce quanto deve essere diffuso il bagliore da applicare.

§Colore: definisce il colore del bagliore da applicare.

Bombato

§Profondità: definisce quanto deve essere accentuata la bombatura da applicare.

§Diffusione: definisce quanto deve essere diffusa la bombatura da applicare.

§Angolo: definisce l'angolo della bombatura da applicare.

Rotazione

§Angolo: imposta il valore dell'angolo della rotazione (effettuata in senso orario) da applicare.

Opacità

§Opacità: imposta un valore da 0 a 255 per definire il grado di opacità dell'immagine. Per valori tendenti allo 0 diminuisce l'opacità dell'immagine che, quindi, diventa sempre più trasparente.

Sfocatura

§Diffusione: definisce quanto deve essere diffusa la sfocatura da applicare.

Onda

§Diffusione: definisce l'ampiezza dell'onda.

§Frequenza: definisce quanto devono essere vicine le onde fra loro.

Prospettiva

§Orizzontale: imposta l'angolo di fuga per ottenere una effetto di prospettiva verso destra (con valori positivi) o verso sinistra (con valori negativi).

§Verticale: imposta l'angolo di fuga per ottenere una effetto di prospettiva verso il basso (con valori positivi) o verso l'alto (con valori negativi).

Distorsione

§Orizzontale: posiziona il punto verso il quale impostare la distorsione lungo un piano orizzontale, a destra (con valori positivi) o a sinistra (con valori negativi).

§Verticale: posiziona il punto verso il quale impostare la distorsione lungo un piano verticale, in alto (con valori positivi) o in basso (con valori negativi).

Best practice:

- | Come lavorare con i Modelli
- | Dove trovare nuovi modelli per WebSite X5

Approfondimenti:

-

Come funziona il Motore di Ricerca interno di WebSite X5


Creazione della Mappa

Passo 2 - Creazione della Mappa >

Creazione della Mappa

 Return to chapter overview
Mostra/Nascondi testo nascosto

Un Sito Web può essere definito come un insieme strutturato di Pagine. Delineare correttamente questa struttura è molto importante dal momento che essa determina come le Pagine sono fra loro collegate e, di conseguenza, definisce i percorsi di navigazione disponibili per arrivare alle singole informazioni.

Una buona struttura farà sì che il Visitatore non si perda durante la navigazione, sappia sempre dove si trova e riesca a raggiungere in pochi passaggi le informazioni che cerca. Al contrario, una cattiva struttura genererà disorientamento e frustrazione e, nel peggiore dei casi, porterà il Visitatore ad abbandonare il Sito.

La finestra Creazione della Mappa permette, dunque, di definire la struttura del Sito inserendo tutte le Pagine necessarie e organizzandole in Livelli e sotto-livelli. Una volta disegnata la Mappa come una struttura ancora vuota di contenuti, è poi possibile procedere all'effettiva creazione di ogni singola Pagina. Cliccando ripetutamente sul pulsante Avanti, si aprono le Pagine nello stesso ordine con cui sono inserite nella Mappa. In alternativa, è possibile utilizzare la Mappa per passare direttamente alla finestra del Programma che consente di lavorare a una determinata Pagina: per far questo, è sufficiente fare doppio click sulla voce corrispondente oppure selezionarla e cliccare sul pulsante Avanti.

Clicca per espandere/ridurre Reference: La Mappa del Sito

Nella finestra Creazione della Mappa la maggior parte dello spazio è occupato dalla rappresentazione schematica della Mappa che si va a costruire.

Di base viene proposta una struttura composta da una cartella Menu contenente l'Home Page e 3 Pagine. Aggiungendo Livelli, Pagine e Separatori attraverso gli appositi comandi, questi verranno inseriti nella cartella Menu della Mappa che, in questo modo, andrà via via prendendo forma.

Se, attraverso le sezioni del Passo 4 - Impostazioni Avanzate, il Sito viene completato con l'inserimento del Motore di ricerca interno (vedere, Modifica del Modello), di una Pagina di Benvenuto, di un Blog, di un'Area Riservata (è sufficiente che anche solo una Pagina sia stata impostata come Pagina Protetta) o di un Carrello di e-commerce, alla struttura della Mappa viene aggiunta anche la cartella Pagine Speciali con le voci corrispondenti: Cerca, Pagina di Benvenuto, Blog, Pagina di Login e Carrello e-commerce.

Oltre a visualizzare la struttura ad albero della Mappa, per le Pagine inserite vengono riportate alcune informazioni aggiuntive quali il Titolo per esteso e la Descrizione della Pagina. Ovviamente, perché queste informazioni vengano visualizzate, è necessario che siano state precedentemente definite attraverso la finestra Proprietà Pagina.
Clicca per espandere/ridurre Reference: I comandi della Barra Strumenti

Immediatamente sopra la rappresentazione schematica della Mappa, è disponibile una Barra Strumenti con i seguenti comandi:

Taglia [CTRL+X] - Copia [CTRL+C] - Incolla [CTRL+V]

Rispettivamente, tagliano, copiano e incollano, all'interno dello stesso Progetto o fra Progetti diversi, le Pagine selezionate. Questi comandi sono presenti anche nel menu contestuale richiamato attraverso il click del tasto destro del mouse sulla Mappa.

Espandi - Contrai

Espandono e contraggono il Livello selezionato in modo da visualizzare o meno le Pagine in esso contenute.

Pagina non visibile sul Menu

Fa in modo che la voce relativa alla Pagina o al Livello selezionato non venga inserita nel Menu di Navigazione. Rendendo non visibile un Livello, tutte le Pagine in esso contenute diventano automaticamente non visibili. Le Pagine non visibili sul Menu possono essere utilmente impiegate come pagine di approfondimento ed essere richiamate tramite collegamenti interni. È necessario ricordare di creare almeno un collegamento che porti alle Pagine non visibili perché, in caso contrario, risulteranno non raggiungibili per i Visitatori.

Pagina Protetta

Richiama la finestra Pagina Protetta, attraverso la quale è possibile impostare la Pagina come Protetta semplicemente spuntando l'opzione Imposta questa Pagina come Protetta. Fatto questo è necessario specificare da quali Gruppi e/o singoli Utenti tale Pagina Protetta potrà essere visualizzata, cliccando in loro corrispondenza nell'elenco proposto. Attivare un Gruppo o attivare tutti gli Utenti appartenenti a un Gruppo non è la stessa cosa: solo nel primo caso, infatti, se in un secondo momento verranno aggiunti nuovi Utenti al Gruppo, per questi varrà automaticamente abilitata la visualizzazione della Pagina Protetta.

Clicca per espandere/ridurre
Finestra Pagina Protetta

Per creare nuovi Gruppi/Utenti è sufficiente accedere alla finestra Gestione Accessi del Passo 4 - Impostazioni Avanzate.

§Anche l'Home Page può essere resa non visibile dal Menu: si consiglia di rendere l'Home Page non visibile solo quando si prevede di mettere il collegamento che porta ad essa in altri punti del Sito, per esempio nell'Intestazione del Modello.

§Se si vuole ricostruire un proprio menu di navigazione, è possibile rendere non visibili tutte le Pagine e i Livelli della Mappa: in questi casi, invece che selezionare una Pagina per volta, è sufficiente selezionare direttamente la cartella Menu e cliccare sul pulsante Pagina non visibile sul Menu.

Per maggiori informazioni su come impostare un'Area Riservata e gestirne l'accesso attraverso la creazione di Gruppi Utente, vedere Come gestire gli accessi e creare un'Area Riservata.

Clicca per espandere/ridurre Reference: I comandi per disegnare la Mappa

I comandi per procedere nella definizione della Mappa del Sito sono:

§Nuovo Livello [CTRL+L]: inserisce un nuovo Livello di menu. Non ci sono limiti al numero di Livelli e di sotto-livelli inseribili.

§Nuova Pagina [CTRL+P]: crea una nuova Pagina che verrà automaticamente inserita all'interno del Livello selezionato.

§Separatore: inserisce un Separatore in modo da poter organizzare anche visivamente le voci dei Menu. Un separatore può essere uno spazio o un titolo ed è particolarmente utile per creare dei menu su più colonne (vedere, Stile del Menu a Comparsa | Voci Menu al Passo 4 - Impostazioni Avanzate).

§Rimuovi [CANC]: elimina la Pagina, il Livello o il Separatore selezionato.

§Rinomina [F2]: modifica il nome della Home Page, della Pagina, del Livello o del Separatore selezionato. È opportuno nominare correttamente i Livelli, le Pagine e i Separatori inseriti dal momento che le voci della Mappa verranno automaticamente riprese nel Menu di navigazione, come titoli delle singole Pagine e come nomi dei file HTML corrispondenti alla Pagine stesse, se non diversamente specificato attraverso la finestra Proprietà Pagina.

§Sposta Sopra [CTRL+U] / Sposta Sotto [CTRL+D]: agiscono sull'ordine di Pagine, Livelli e Separatori, spostando verso l'alto o verso il basso quello selezionato.

Per modificare l'ordine di Livelli, Pagine e Separatori è anche possibile agire direttamente sulla Mappa: è sufficiente selezionare la voce su cui si intende agire, trascinarla e rilasciarla nella posizione che deve assumere (Drag&Drop). È possibile selezionare più Livelli, Pagine e/o Separatori utilizzando i tasti CTRL e SHIFT.

§Proprietà...: attraverso la finestra richiamata, imposta le proprietà della Pagina (finestra Proprietà Pagina) o del Livello (finestra Proprietà Livello) selezionato.

Best practice:

- | Come creare e lavorare sulla Mappa
- | Come gestire gli accessi e creare un'Area Riservata

Approfondimenti:

-

La struttura di navigazione di un Sito


mappa_livello

Finestra Proprietà Livello

Passo 2 - Creazione della Mappa > Creazione della Mappa >

Finestra Proprietà Livello

 Return to chapter overview
Mostra/Nascondi testo nascosto

La finestra Proprietà Livello, richiamata selezionando un Livello sulla Mappa e cliccando sul pulsante Proprietà..., presenta alcune opzioni per definire il comportamento del Livello nel Menu di navigazione.

In WebSite X5 i Livelli, a differenza delle Pagine, non hanno dei contenuti propri: sono semplici categorie, utili per organizzare le Pagine e, di conseguenza, per articolare il Menu di navigazione in una struttura ad albero semplice da percorrere per chi naviga nel Sito.

Clicca per espandere/ridurre Reference: Le Proprietà dei Livelli

§Non visualizzare il Menu a comparsa per questo Livello: attivando questa opzione, il Menu a comparsa relativo alla voce di Livello non viene visualizzato su passaggio del mouse.

§Collegamento su click sulla voce di Livello: associa, attraverso la finestra Collegamento richiamata, un collegamento direttamente alla voce di Livello.

Scegliere di "non visualizzare il Menu a comparsa per un Livello" attivando un "collegamento su click sulla voce dello stesso Livello" è utile, per esempio, se si vuole inserire un link a un Sito esterno direttamente come voce di Menu, oppure nel caso si voglia sostituire un sotto-menu contenente un numero elevato di voci con l'apertura di una Pagina creata apposta per dare l'accesso alle diverse sezioni interne.

§Icona da visualizzare sul Menu: seleziona l'immagine (file .JPG, .GIF, .PNG) che verrà visualizzata sul Menu di navigazione, a fianco della voce relativa al Livello.

Best practice:

-

Come sfruttare le proprietà di Pagine e Livelli


mappa_pagina

Finestra Proprietà Pagina

Passo 2 - Creazione della Mappa > Creazione della Mappa >

Finestra Proprietà Pagina

 Return to chapter overview
Mostra/Nascondi testo nascosto

La finestra Proprietà Pagina, richiamata selezionando una Pagina sulla Mappa e cliccando sul pulsante Proprietà..., presenta numerose opzioni attraverso le quali è possibile definire una serie di proprietà necessarie per l'ottimizzazione, per la personalizzazione grafica e per l'aggiunta di eventuali porzioni di codice.

Le opzioni disponibili sono raccolte in 3 sezioni: Generale, Grafica e Esperto.

Clicca per espandere/ridurre Reference: Le opzioni della Sezione Generale

Attraverso le opzioni di questa sezione si imposta una serie di parametri necessari per la corretta ottimizzazione della Pagina:

§Titolo per esteso: campo per dare alla Pagina un titolo diverso da quello inserito nella Mappa.

Il nome dato alla Pagina in fase di costruzione della Mappa viene mantenuto come voce nel Menu di navigazione; l'eventuale Titolo per esteso qui specificato, invece, viene visualizzato come Titolo effettivo della Pagina.

Nel caso della Home Page, il titolo non viene visualizzato all'interno della Pagina ma è comunque possibile specificarne il Titolo per esteso: il titolo viene sempre utilizzato nel menu, mentre il titolo o, se presente, il Titolo per esteso viene utilizzato per comporre il metatag <title> nel codice HTML della Pagina.

§Descrizione della Pagina: campo per digitare una descrizione specifica per la Pagina. La descrizione della Pagina deve essere sintetica e significativa: viene inserita come valore del metatag <description> nel codice HTML della Pagina e utilizzata dai Motori di Ricerca per l'indicizzazione.

§Parole Chiave per la ricerca: campo per digitare una serie di parole chiave (fra loro separate da una virgola) specifiche per la Pagina. Le parole chiave vengono inserite come valore del metatag <keywords> nel codice HTML della Pagina e utilizzate dai Motori di Ricerca per l'indicizzazione.

§Nome del file generato: campo per digitare il nome del file HTML relativo alla Pagina.

Se non diversamente specificato, come nome del file HTML viene automaticamente ripreso il nome dato alla Pagina durante la costruzione della Mappa. Dare nomi brevi e significativi ai file permette di ottenere indirizzi semplici e facilmente memorizzabili e ha risvolti positivi anche sull'indicizzazione da parte dei Motori di Ricerca. Questa opzione non è disponibile per l'Home Page.
Clicca per espandere/ridurre Reference: Le opzioni della Sezione Grafica

Attraverso le opzioni di questa sezione si agisce su alcuni importanti aspetti grafici della Pagina su cui si sta lavorando.

Innanzitutto è possibile fare in modo che la Pagina abbia uno sfondo diverso da quello delle altre Pagine del Sito, definito dal Modello scelto (vedere, Scelta del Modello). Ricordiamo che per sfondo della Pagina si intende l'area esterna alla Pagina che viene visualizzata quando la finestra del Browser viene aperta con dimensioni superiori rispetto alla risoluzione del Sito.

Le opzioni per definire lo Sfondo del Sito solo per questa Pagina sono:

§Colore Sfondo: specifica il colore da utilizzare come riempimento dello sfondo.

§File Immagine: seleziona il file grafico (.JPG, .GIF, .PNG.) relativo all'immagine da utilizzare come sfondo.

§Disposizione: specifica se l'immagine inserita come sfondo deve essere ripetuta o meno. L'Immagine può essere ripetuta solo in senso orizzontale, solo in senso verticale o in entrambe i sensi, in modo da giungere ad occupare l'intero spazio a disposizione. In più, è possibile fare in modo che l'immagine venga adattata, ovvero ridimensionata in modo da coprire tutto lo sfondo.

§Allineamento: definisce come deve essere allineata l'immagine inserita come sfondo della Pagina.

§Immagine di sfondo fissa: attivando questa opzione, l'immagine inserita come sfondo della Pagina viene mantenuta fissa anche quando il contenuto della Pagina viene fatto scorrere mediante la barra di scroll.

Anche lo sfondo del Contenuto della Pagina selezionata può essere impostato in modo da essere diverso da quello delle altre Pagine del Sito, definito dal Modello scelto (vedere, Scelta del Modello). In questo caso occorre utilizzare le opzioni, del tutto analoghe a quelle appena viste, presenti sotto la voce Contenuto della Pagina solo per questa Pagina.

Infine, è ancora possibile impostare alcune Opzioni generali:

§Icona da visualizzare sul Menu: seleziona l'immagine (file .JPG, .GIF, .PNG) che verrà visualizzata sul Menu di navigazione, a fianco della voce relativa alla Pagina.

§Crea la Pagina senza applicare il Modello: fa in modo che alla Pagina non venga applicato il Modello di stile scelto o creato come Modello Personalizzato (vedere, Scelta del Modello). Attivando questa opzione, dunque, la Pagina viene creata mantenendo solo i contenuti in essa inseriti ma non viene applicato né il Modello di stile né il menu di navigazione.

§Larghezza Pagina: disponibile solo se è stata attivata l'opzione Crea la Pagina senza applicare il Modello, specifica il valore in pixel della larghezza della Pagina.
Clicca per espandere/ridurre Reference: Le opzioni della Sezione Esperto

Attraverso le opzioni di questa finestra si agisce manualmente sul codice HTML generato per la Pagina a cui si sta lavorando.

§Estensione del file generato: specifica l'estensione con la quale verrà salvato il file relativo alla Pagina. Di default viene proposta l'estensione .HTML ma, in alternativa, è possibile scegliere fra .PHP, .ASP, .CFM e .JSP. Anche il file index.html relativo alla Home Page può essere salvato con un'estensione diversa. Solo per le Pagine Protette (vedi il comando [image] Pagina Protetta nella Barra Strumenti della Mappa) non è possibile modificare il formato del file generato che rimane necessariamente .PHP.

§Codice personalizzato: definisce la posizione all'interno del codice HTML della Pagina in cui deve essere inserito il codice personalizzato: Prima dell'apertura del tag HTML, Prima della chiusura del tag HEAD, Proprietà del tag BODY (es: style, onload, ecc) (ovvero all'interno dell'istruzione <BODY>, ad esempio: <BODY onload="alert('Hello!')">), Prima della chiusura del tag BODY, Dopo la chiusura del tag BODY. Selezionata la posizione, è disponibile un campo in cui digitare o incollare la porzione di codice che deve essere inserita all'interno del codice HTML della Pagina creato in automatico dal Programma.

L'opzione Codice personalizzato è utile quando, per esempio, si vogliono collegare dei particolari fogli di stile (CSS), oppure quando si devono lanciare degli eventi sull'onload della Pagina. In particolare, per il corretto funzionamento di alcuni JavaScript, che possono essere inseriti attraverso l'apposito Oggetto HTML e Widgets, è richiesto l'inserimento di opportune righe di codice sia nella sezione <HEAD> che nella sezione <BODY> del file HTML della Pagina.

Infine, nella sezione Impostazioni SiteMap sono raggruppate alcune opzioni utili per lavorare sulla SiteMap del Sito:

§Inserisci questa Pagina nella SiteMap: opzione attiva di default, include la Pagina nella SiteMap creata per il Sito.

§Priorità dei contenuti: assegna un punteggio alla Pagina, per indicarne l'importanza in relazione alle altre Pagine del Sito. Questo parametro viene riportato all'interno della SiteMap generata.

§Frequenza di aggiornamento: specifica con quale frequenza viene aggiornata la Pagina. Questo parametro viene riportato all'interno della SiteMap generata.

Note sulla compatibilità con le versioni precedenti:

A differenza di quanto accadeva nelle versioni precedenti, nell'attuale versione 10 è possibile richiamare la finestra Proprietà Pagina anche per le Pagine Speciali che compaiono automaticamente sulla Mappa in seguito all'inserimento del Motore di ricerca interno (vedere, Modifica del Modello), di una Pagina di Benvenuto, di un Blog, di un'Area Riservata o di un Carrello di e-commerce.

Best practice:

-

Come sfruttare le proprietà di Pagine e Livelli

-

Come inserire dei messaggi pubblicitari all'interno del proprio Sito

Approfondimenti:

- | HTML, HTML5 e CSS
- | Il Browser Web e il Browser di WebSite X5
- | Motori di Ricerca e Ottimizzazione SEO


Creazione della Pagina

Passo 3 - Creazione della Pagina >

Creazione della Pagina

 Return to chapter overview
Mostra/Nascondi testo nascosto

Dopo aver articolato la Mappa del Progetto, si può procedere alla creazione delle singole Pagine inserite nel Sito. La finestra Creazione della Pagina permette, quindi, di definire la struttura di impaginazione e di effettuare l'inserimento dei contenuti.

Il percorso e il Titolo della Pagina alla quale si sta lavorando viene riportato come Pagina corrente.

Clicca per espandere/ridurre Reference: La Griglia di impaginazione

Per rendere più intuitiva l'impaginazione dei contenuti, WebSite X5 propone una Griglia che, di default, è composta da 2 righe e 2 colonne: è sufficiente trascinare gli Oggetti disponibili all'interno delle Celle di tale Griglia (un Oggetto per Cella), per comporre la Pagina.

Ovviamente, è possibile aggiungere righe e colonne in modo da disporre di un numero superiore di Celle e, in più, è possibile definire manualmente la larghezza delle singole colonne. Come vedremo, grazie a queste possibilità di disegno della Griglia e al fatto di poter disporre un Oggetto anche su più Celle adiacenti, è possibile ottenere impaginazioni anche molto raffinate.

Una precisazione importante: l'impiego della Griglia serve unicamente per semplificare e guidare l'impaginazione dei contenuti. Fatta eccezione per pochi e specifici casi particolari, rappresentati da combinazioni di impaginazione molto complesse, la Griglia di impaginazione non viene "tradotta" come tabella nel codice HTML delle Pagine. In tutti i casi, la Griglia di impaginazione non sarà mai visibile durante la navigazione con il Browser.

Come anticipato, ogni Cella della Griglia può contenere un unico Oggetto ma ciascun Oggetto può essere disposto anche su più Celle adiacenti orizzontalmente o verticalmente, in modo da occupare uno spazio superiore della Pagina.

L'aspetto delle Celle della Griglia di impaginazione cambia a seconda dei diversi stati che può assumere:

§se contiene un Oggetto che ancora non è stato costruito, riporta l'icona corrispondente al tipo di Oggetto su uno sfondo di righe oblique grigie;

§se contiene un Oggetto che è già stato costruito, riporta l'icona corrispondente al tipo di Oggetto su uno sfondo azzurro sfumato;

§se contiene l'Oggetto selezionato, vengono visualizzati il perimetro e le maniglie di selezione.
Clicca per espandere/ridurre Reference: I comandi della Barra Strumenti

Immediatamente sopra la Griglia di impaginazione è presente una Barra Strumenti che mette a disposizione i seguenti comandi:

Contenuto Oggetto

Apre la finestra che consente di procedere alla creazione dell'Oggetto selezionato nella Griglia di impaginazione. La finestra richiamata varia in base al tipo di Oggetto (Testo, Immagine, ecc...).

Stile della Cella

Richiama la finestra Stile della Cella per definire l'aspetto grafico della Cella corrente della Griglia di impaginazione.

Assegna un'Ancora all'Oggetto

Crea un'Ancora e la associa all'Oggetto selezionato nella Griglia di impaginazione. Cliccando sulla freccia a lato del pulsante, è possibile visualizzare un menu con i seguenti comandi: Inserisci Ancora..., Modifica... e Rimuovi.

Aggiungi Riga/Aggiungi Colonna

Aggiungono una nuova Riga o una nuova Colonna nella Griglia di impaginazione. Cliccando sulla freccia a lato dei pulsanti, è possibile scegliere se la Riga/Colonna deve essere aggiunta prima o dopo la Cella selezionata. Si possono creare griglie con un massimo di 64 righe e di 12 colonne.

Rimuovi Riga/Rimuovi Colonna

Eliminano la Riga o la Colonna selezionata dalla Griglia di impaginazione. Al minimo, la Griglia di impaginazione è composta da un'unica Cella (1 riga x 1 colonna).

L'Ancora è un riferimento che serve per identificare la posizione di un Oggetto all'interno della Pagina: viene utilizzata per impostare collegamenti diretti all'Oggetto stesso.

Note sulla compatibilità con le versioni precedenti:

Nelle versioni precedenti, le opzioni relative ai Margini della Cella e all'Allineamento del contenuto della Cella erano disponibili attraverso menu richiamati dai pulsanti [image] e [image] presenti nella Barra Strumenti presente sopra la Griglia di impaginazione. Nell'attuale versione 10, tali pulsanti sono stati rimossi e le opzioni sono state incluse nella finestra Stile della Cella| Stile.
Clicca per espandere/ridurre Reference: La lista degli Oggetti disponibili

A fianco della Griglia di impaginazione è riportato l'elenco degli Oggetti disponibili. Per inserire un Oggetto in una Pagina è sufficiente selezionare l'icona che lo rappresenta dall'elenco, trascinarla e rilasciarla sulla Griglia di impaginazione, in corrispondenza della Cella che deve occupare.

Gli Oggetti disponibili sono:

Oggetto Testo | Oggetto Immagine | Oggetto Tabella | Oggetto Galleria
Oggetto Video/Suono | Oggetto Modulo Invio E-mail | Oggetto Social Network | Oggetto Guestbook
Oggetto Mappa | Oggetto Animazione Flash | Oggetto Elenco Prodotti | Oggetto HTML e Widgets

Una volta inserito un Oggetto nella Griglia di impaginazione è sufficiente selezionarlo e cliccare sul pulsante [image] (o fare doppio click in sua corrispondenza) per aprire la finestra che ne permette l'effettiva creazione.

Note sulla compatibilità con le versioni precedenti:

Oggetti disponibili - L'Oggetto Guestbook, l'Oggetto Social Network e l'Oggetto Mappa sono stati introdotti solo nell'attuale versione 10 di WebSite X5: nelle precedente versione 9 erano disponibili come Widget dell'Oggetto HTML e Widgets.

Best practice:

- | Come impostare una Pagina attraverso la Griglia di impaginazione
- | Come creare e utilizzare le Ancore


Inserimento oggetto Testo

Oggetto Testo

Passo 3 - Creazione della Pagina >

Oggetto Testo

 Return to chapter overview
Mostra/Nascondi testo nascosto

Al di là delle Immagini, dei Video e delle Animazioni che si possono utilizzare, nella maggior parte dei casi, i contenuti principali di un Sito vengono veicolati attraverso i Testi.

Scrivere per la Rete non è la stessa cosa che scrivere pensando di dover poi andare in stampa: ogni mezzo ha le sue peculiarità e Internet si distingue principalmente per il supporto (il monitor di un computer o lo schermo di un dispositivo mobile), la modalità di lettura che ispira (più vicina a una rapida scansione che a una lettura sequenziale) e la disponibilità di un numero potenzialmente illimitato di alternative (consideriamo quanti Siti si occupano dello stesso argomento).

Per catturare l'attenzione di un lettore, indurlo a leggere e, nella migliore delle ipotesi, persuaderlo della bontà di quello che stiamo proponendo è quindi necessario che i contenuti testuali siano scritti in modo da essere adatti per la pubblicazione in Rete: innanzi tutto devono presentare dei contenuti di interesse e poi devono riuscire a farlo in modo conciso, ma non criptico, ed efficace. È bene che il discorso sia spezzato in periodi brevi, sia perché risulta di più semplice comprensione, sia perché visivamente risulterà meno compatto e opprimente. Infine, per aumentare la leggibilità dei testi è importante curarne la tipografia, ovvero l'impostazione che si dà ai caratteri per titoli, evidenze, corpo principale, didascalie e altro.

Riflettere su questi aspetti e curare la redazione dei testi è sicuramente molto importante per riuscire a creare un Sito Web che possa essere giudicato positivamente da quanti lo visiteranno. Niente come un contenuto poco interessante, espresso in modo approssimativo e con frasi sgrammaticate o punteggiate da errori ortografici, porta a bollare un Sito come sciatto e non meritevole di una seconda visita.

Fatte queste brevi ma doverose considerazioni sul tema del Web Writing, WebSite X5 permette di comporre i Testi necessari attraverso un apposito editor interno e di procedere alla loro formattazione. Ovviamente è anche possibile riprendere i testi già creati con altri programmi e inserirli attraverso una semplice operazione di Copia e Incolla.

Clicca per espandere/ridurre Reference: I comandi dell'Editor di Testo

La Barra Strumenti dell'Editor di Testo presenta i seguenti comandi:

Taglia [CTRL+X] - Copia [CTRL+C] - Incolla [CTRL+V]

Tagliano, copiano e incollano il testo selezionato. In questo caso, prima di essere incollato, al testo vengono tolte tutte le formattazioni eventualmente associate in origine e assume quelle definite nell'editor.

Incolla speciale

Incolla il testo precedentemente tagliato o copiato attraverso i comandi Taglia e Copia. Il testo incollato mantiene tutte le formattazioni originali.

Grazie ai comandi Taglia, Copia e Incolla è possibile riprendere brani da file di testo già creati in precedenza anche con altri editor.

Annulla [CTRL+Z] - Ripristina [ALT+MAIUSC+BACKSPACE]

Annullano e ripristinano l'ultima operazione eseguita/annullata.

Inserisci Collegamento [CTRL+L]

Imposta un link ipertestuale sulla/e parola/e selezionata/e. E' possibile definire le impostazioni del collegamento attraverso la finestra richiamata Collegamento.

Inserisci Immagine

Inserisce un'immagine (in formato .JPG, .GIF, .PNG, .BMP) all'interno del testo. Le immagini inserite nell'oggetto Testo vengono automaticamente ridimensionate se di dimensioni superiori a quella della Cella della Griglia di impaginazione. In più, le immagini inserite possono essere liberamente ridimensionate attraverso le apposite maniglie di selezione: per impaginazioni particolari è consigliabile, comunque, ricorrere all'apposito Oggetto Immagine.

Abilita Codice HTML

Permette di digitare direttamente del codice HTML all'interno della pagina di testo. In modalità HTML, i caratteri < e > non sono interpretati come "minore" e "maggiore" e ciò che è inserito al loro interno viene interpretato come un tag HTML.

Impostazioni per il RollOver

Imposta l'effetto di RollOver sul testo, trasformandolo da statico a scorrevole. E' possibile definire le impostazioni del RollOver attraverso la finestra richiamata RollOver.

Adatta alla larghezza della Cella

Simula nell'editor l'aspetto che il testo assumerà in relazione alle dimensioni della Cella delle Griglia di impaginazione che lo contiene.

Sfondo chiaro/scuro

Imposta un colore chiaro o scuro per lo sfondo dell'Editor: in questo modo è più semplice, per esempio, comporre dei testi che, per avere un giusto contrasto rispetto allo sfondo previsto dal Modello grafico applicato, devono essere di colore bianco.

Scelta del font - Dimensione del font

Impostano il tipo di carattere (font) da utilizzare e le dimensioni.

Il menu a tendina propone tutti i font installati sul computer su cui si sta lavorando. E' necessario considerare che se il font utilizzato non è installato anche sul computer di chi navigherà nel Sito, questo verrà automaticamente sostituito con un font di sistema simile a quello di partenza.

Grassetto [CTRL+B] - Corsivo [CTRL+I] - Sottolineato [CTRL+U]

Rendono in grassetto, corsivo e sottolineato il testo selezionato.

Colore del Testo - Colore di Sfondo del Testo

Impostano il colore da applicare al testo selezionato o allo sfondo del testo selezionato.

Elenco puntato

Crea un elenco puntato di voci.

Aumenta rientro / Riduci rientro

Aumentano e riducono il rientro del paragrafo selezionato.

Allineamento a sinistra - Allineamento centrato - Allineamento a destra - Allineamento giustificato

Allineano a sinistra, al centro, a destra o giustificano il testo selezionato.

Disponi Testo a destra - Disposizione normale - Disponi Testo a sinistra

Attivi quando viene selezionata un'immagine inserita nel testo, definiscono la disposizione del testo rispetto all'immagine stessa, facendolo scorrere lungo il lato destro/sinistro dell'immagine o lasciando che l'immagine rimanga inserita nel flusso del testo come una qualsiasi altra parola.

Cliccando con il tasto destro del mouse è possibile richiamare un menu contestuale che ripropone i seguenti comandi: Annulla, Taglia, Copia, Incolla, Incolla speciale e Seleziona tutto.

Best practice:

-

Come lavorare con l'Oggetto Testo


Finestra RollOver

Passo 3 - Creazione della Pagina > Oggetto Testo >

Finestra RollOver

 Return to chapter overview
Mostra/Nascondi testo nascosto

Attraverso i comandi di questa finestra, richiamata attraverso il pulsante [image] dell'Editor dell'Oggetto Testo o dell'Oggetto Tabella, si definiscono le impostazioni per il RollOver dei testi.

Clicca per espandere/ridurre Reference: Le impostazioni per il RoolOver

Per prima cosa, occorre attivare l'effetto selezionando l'opzione Abilita RollOver.

Abilitato l'effetto, è possibile definire come deve presentarsi attraverso le opzioni del riquadro Modalità:

§Movimento: definisce il tipo di scorrimento del testo. È possibile scegliere tra le seguenti opzioni:

Nessuno - Mostra barra di scorrimento: il testo non scorre ma, dal momento che viene fissata l'altezza della Cella (vedere dopo l'opzione Altezza), se questa non è sufficiente per permette la visualizzazione del testo intero, verrà automaticamente inserita la barra di scorrimento.

Scorrimento singolo: il testo scorre nella direzione specificata e, giunto al termine, si ferma.

Scorrimento continuo: il testo scorre nella direzione specificata e, giunto al termine, ricomincia daccapo, senza stacchi.

Scorrimento alternato: il testo scorre nella direzione specificata e, giunto al termine, ricomincia nella direzione opposta.

Scorrimento a schede: il testo viene virtualmente scomposto in schede, ovvero in blocchi di altezza pari a quanto impostato per l'opzione Altezza. Lo scorrimento del testo porta alla visualizzazione della prima scheda, poi segue una pausa prima di procedere con lo scorrimento per la visualizzazione della seconda scheda. Prosegue in questo modo, ricominciando daccapo dopo la visualizzazione dell'ultima scheda. Perché l'effetto abbia una resa ottimale è necessario che il testo sia scritto e formattato in modo tale che sia poi possibile dividerlo in schede impostando adeguatamente l'Altezza.

§Direzione: definisce la direzione dello scorrimento del testo. Lo scorrimento può avvenire verso l'Alto, il Basso, Sinistra o Destra.

In più, nel riquadro Opzioni sono disponibili le seguenti voci:

§Effetto: permette di scegliere tra gli effetti Lineare, Rimbalzo e Decelerazione per tutti i tipi di movimento, tranne che per lo Scorrimento continuo.

§Altezza: imposta il valore per l'altezza della Cella che contiene il testo.

§Durata (sec): imposta per quanti secondi deve durare l'effetto. Nel caso sia stato attivato lo Scorrimento singolo, lo Scorrimento continuo o lo Scorrimento alternato, la durata definisce l'intervallo di tempo in cui si sviluppa il movimento, prima che ricominci. Nel caso, invece, sia stato attivato lo Scorrimento a schede, la durata definisce il tempo di visualizzazione di una scheda, prima che si passi alla successiva.

§Ferma il movimento al passaggio del mouse: fa in modo che lo scorrimento del testo si interrompa al passaggio del mouse.

L'opzione Altezza è disponibile solo se il RollOver impostato è verticale (direzione: verso l'alto o verso il basso). Se, invece, il RollOver impostato è orizzontale (direzione: verso sinistra o verso destra), l'effetto è migliore se l'Oggetto Testo occupa una riga intera della Griglia di impaginazione.

Best practice:

-

Come lavorare con l'Oggetto Testo


Oggetto Immagine

Passo 3 - Creazione della Pagina >

Oggetto Immagine

 Return to chapter overview
Mostra/Nascondi testo nascosto

Le Immagini sono uno degli elementi maggiormente utilizzati nella creazione di una Pagina Web. Fra le altre cose, possono servire per illustrare un concetto, per mostrare un prodotto, per veicolare un messaggio o semplicemente per abbellire. In qualsiasi caso, le Immagini sono importanti perché concorrono a definire l'aspetto complessivo del Sito e a fare in modo che venga percepito come un qualcosa di bello, curato e professionale.

WebSite X5 permette di importare tutti i principali formati grafici e mette a disposizione un funzionale Editor Immagine per portare a termine tutte le più comuni operazioni di fotoritocco: taglio, rotazione, correzione, aggiunta di maschere, filtri e cornici. In più, permette di lavorare sulle Immagini per ottenere spettacolari visioni panoramiche e zoom.

È da sottolineare che WebSite X5 affronta anche il problema della copia non autorizzata delle Immagini da Internet mettendo a disposizione un sistema di protezione che impedisce di risalire al file originario e che può prevedere l'applicazione di filigrana e l'indicazione di copyright.

I comandi necessari per procedere alla creazione di un Oggetto Immagine sono articolati nelle seguenti sezioni: Generale, Visualizzazione e SiteMap.

Clicca per espandere/ridurre Reference: I comandi della Sezione Generale

Attraverso i comandi di questa sezione si procede all'importazione dei file grafici e all'editing delle Immagini.

WebSite X5 permette di importare tutti i più diffusi formati grafici (.JPG, .GIF, .PNG, .PSD, .BMP, .TIF, .DIB, .PCX, .RLE, .TGA, .WMF) semplicemente selezionando la risorsa da utilizzare fra quelle presenti in locale sul PC o, in alternativa, online direttamente su Internet.

L'anteprima dell'Immagine importata viene visualizzata nel riquadro Anteprima. Cliccando sul pulsante Modifica... presente sotto l'anteprima è possibile richiamare l'Editor Immagine interno per modificare l'Immagine importata.

Per l'Immagine inserita è possibile definire una serie di Proprietà:

§Titolo: è il titolo dell'immagine; nel codice HTML delle Pagine, il testo immesso verrà assegnato all'attributo title del tag <img>.

§Testo alternativo: è il testo che viene presentato in alternativa all'Immagine quando questa non può essere visualizzata. Nel codice HTML delle Pagine, il testo immesso verrà assegnato all'attributo alt del tag <img>.

Il Titolo e il Testo alternativo sono due parametri che devono essere valutati e composti con attenzione dal momento che risultano importanti sia per l'accessibilità che per l'ottimizzazione dei Siti Web.

§Collegamento: imposta un link sull'Immagine. Cliccando sul pulsante [image] viene richiamata la finestra Collegamento attraverso la quale è possibile scegliere il tipo di azione oltre che le relative opzioni.

Clicca per espandere/ridurre Reference: I comandi della Sezione Visualizzazione

Attraverso i comandi di questa sezione si definisce come deve essere visualizzata l'Immagine importata: WebSite X5, infatti, permette di ottenere anche Immagini panoramiche e/o con effetti di zoom e spostamento.

Le Modalità di visualizzazione disponibili sono:

Ridimensionamento automatico dell'Immagine: attiva di default, ridimensiona in automatico l'Immagine per adattarla alle dimensioni della Cella della Griglia di impaginazione che la contiene.

Zoom e spostamento manuale dell'Immagine: fa in modo che l'Immagine possa essere ingrandita, tramite click del mouse, fino a raggiungere le dimensioni previste dal fattore di zoom impostato. Una volta ingrandita, l'Immagine potrà anche essere spostata in modo da portare in primo piano il particolare desiderato. In questo caso specifico, lo spostamento dovrà essere effettuato manualmente, cliccando sull'Immagine e trascinandola fino alla posizione voluta.

Per ottenere questo effetto le dimensioni dell'Immagine vengono prima ridotte a quelle della Cella della Griglia di impaginazione e di conseguenza ricalcolate o in base al fattore impostato per lo Zoom Iniziale (se si sceglie come Modalità di spostamento lo Spostamento libero) o in proporzione all'Altezza stabilita (se si imposta come Modalità di spostamento l'opzione Foto panoramica orizzontale o l'opzione Foto panoramica verticale). In questo modo, l'Immagine risulterà essere più grande rispetto all'area di visualizzazione e potrà muoversi al suo interno.

Zoom e spostamento automatico dell'Immagine: analoga all'opzione precedente, si distingue per il fatto che lo spostamento avviene semplicemente avvicinando il mouse ai bordi dell'Immagine.

Selezionando come Modalità di visualizzazione il Ridimensionamento automatico dell'Immagine, è possibile agire sulle seguenti Impostazioni:

§Qualità: è il livello di qualità da mantenere nel salvataggio dell'Immagine in .JPG. Tutte le Immagini importate vengono automaticamente convertite in formato .JPG o, nel caso venga impostata la trasparenza, in formato .PNG. Nel caso di salvataggio in .JPG, maggiore è il fattore di compressione impostato, minore sarà la qualità mantenuta.

È consigliabile inserire file grafici in formato .JPG, .GIF e .PNG. Tutte le Immagini inserite, se in formato diverso da .JPG, .GIF e .PNG, vengono automaticamente convertite in formato .JPG, in base al livello di compressione specificato. La conversione in .JPG o, nel caso di immagini su cui è stata impostata la trasparenza, in .PNG viene effettuata anche se l'Immagine ha dimensioni maggiori rispetto a quelle della Cella della Griglia di impaginazione che la contiene e se viene modificata attraverso l'Editor Immagine.

In tutti gli altri casi, l'Immagine viene copiata così come è, in modo da mantenere l'effetto di trasparenza applicato alle .GIF.

§Metodo di riduzione: è il metodo da applicare per la riduzione delle dimensioni (larghezza e altezza) delle immagini. È possibile scegliere tra:

-Bilinear (più veloce): è il metodo di riduzione più veloce ma consente di mantenere una qualità dell'immagine inferiore rispetto agli altri metodi.

-Decimate (medio): è il metodo di riduzione che consente di ottenere prestazioni, in fatto di velocità e qualità, intermedie rispetto agli altri metodi.

-Bicubic (più lento, più preciso): è il metodo di riduzione più lento ma è in grado di assicurare un'elevata qualità dell'immagine.

Selezionando come Modalità di visualizzazione lo Zoom e spostamento manuale dell'Immagine o lo Zoom e spostamento automatico dell'Immagine, è possibile agire sulle seguenti Impostazioni:

§Modalità di spostamento: specifica in che direzione l'Immagine può essere spostata manualmente o automaticamente. Le opzioni disponibili sono:

-Spostamento libero: l'Immagine può essere trascinata sia in senso orizzontale che verticale. In questo caso occorre specificare il valore dello Zoom massimo: per esempio, un fattore di ingrandimento impostato al 200% porta a raddoppiate le dimensioni originali dell'Immagine.

Immagine inserita | Immagine con effetto

-Foto panoramica orizzontale: l'Immagine può essere trascinata solo in senso orizzontale. Per sfruttare al meglio questo effetto occorre inserire Immagini con la base molto maggiore dell'altezza. In questo caso occorre specificare il valore in pixel dell'altezza dell'Immagine nell'apposito campo Altezza.

Immagine inserita | Immagine con effetto

-Foto panoramica verticale: l'Immagine può essere trascinata solo in senso verticale. Questa volta occorre utilizzare Immagini con altezza molto maggiore della base e impostare nel campo Altezza il valore in pixel dell'altezza che si desidera mantenere per la Cella della Griglia di impaginazione interessata.

Immagine inserita | Immagine con effetto

§Zoom massimo: disponibile solo per la modalità di spostamento Spostamento libero, imposta il fattore di ingrandimento che deve essere applicato all'Immagine perché possa risultare più grande rispetto all'area in cui verrà visualizzata. Se l'Immagine non venisse ingrandita non potrebbe, infatti, essere trascinata.

§Altezza: disponibile solo per le modalità di spostamento Foto panoramica orizzontale e Foto panoramica verticale, imposta, nel primo caso, il valore in pixel dell'altezza dell'Immagine, e, nel secondo caso, dell'altezza della Cella della Griglia di impaginazione in cui viene visualizzata l'Immagine.

§Consenti l'ingrandimento dell'Immagine: attivata di default, fa in modo che l'Immagine possa essere ingrandita e rimpicciolita dal Visitatore attraverso la rotella del mouse. All'apertura della Pagina, l'Immagine viene visualizzata alle dimensioni originali e l'icona presente nell'angolo inferiore destro indica la possibilità di farne lo zoom. Tramite la rotella del mouse l'Immagine viene quindi ingrandita fino al fattore di fattore di Zoom massimo impostato.

§Mostra la Barra dello Zoom: disponibile solo se viene attivata l'opzione Consenti l'ingrandimento dell'Immagine, visualizza sulla finestra Immagine una barra attraverso la quale il Visitatore può regolare e impostare lo zoom.

§Mostra il navigatore: mette a disposizione del Visitatore un navigatore, ovvero una piccola finestra visualizzata sull'Immagine contenente una miniatura dell'Immagine stessa. La funzione del navigatore è di evidenziare, attraverso un riquadro, la porzione dell'Immagine attualmente visibile: tale riquadro può essere trascinato all'interno del navigatore e ciò equivale a spostare manualmente l'Immagine. Spostando il mouse al di fuori della finestra Immagine, il navigatore scompare con un effetto di movimento in uscita verso l'alto.

§Abilita il movimento automatico continuo: fa in modo che l'Immagine continui a spostarsi automaticamente per tutto il tempo in cui viene visualizzata. Può essere utile per far capire al Visitatore che l'Immagine può essere ingrandita. Il Visitatore può riprendere il controllo del movimento utilizzando il mouse, mentre può zoomare attraverso la Barra dello Zoom, se disponibile, o la rotella del mouse.

Solo se per l'Immagine a cui si sta lavorando è stato impostato il Ridimensionamento automatico dell'Immagine come Modalità di visualizzazione, è possibile prevedere un Effetto su passaggio del mouse:

§Effetto su passaggio del mouse: imposta il tipo di effetto che deve essere riprodotto su passaggio del mouse sull'Immagine scegliendolo fra quelli proposti.

§Impostazioni: diverse in base al tipo di Effetto su passaggio del mouse selezionato, impostano i parametri che definiscono l'effetto (per esempio, il colore e lo spessore del bordo per l'effetto "Bordo Colorato").

Infine è possibile sfruttare le opzioni di Protezione per tentare di impedire la copia non autorizzata delle Immagini:

§Proteggi Immagine dalla copia: protegge l'Immagine impedendo che possa essere facilmente copiata attraverso comandi come Salva immagine con nome messi a disposizione dai menu contestuali dei diversi Browser.
Clicca per espandere/ridurre Reference: I comandi della Sezione SiteMap

Attraverso i comandi di questa sezione si specificano alcune informazioni aggiuntive sull'Immagine, utili per completare la SiteMap del Sito.

Innanzi tutto occorre attivare l'opzione Aggiungi Immagine alla SiteMap: in questo modo la SiteMap che viene creata automaticamente da WebSite X5 (vedere, Crea automaticamente la SiteMap in Impostazioni Generali | Esperto) viene completata con le informazioni relative all'Immagine. Fatto questo è quindi necessario definire le seguenti impostazioni:

§Titolo: (parametro opzionale) specifica un titolo per l'Immagine.

§Descrizione breve: (parametro opzionale) specifica una descrizione o didascalia per l'Immagine.

§Posizione geografica: (parametro opzionale) specifica informazioni, come indirizzo, città o Nazione, che servono a localizzare geograficamente l'Immagine.

§URL del file di licenza: (parametro opzionale) specifica la URL del file contenente la licenza d'uso dell'Immagine.

Non è possibile inserire nella SiteMap Immagini su cui è stata attivata la protezione (vedere, Proteggi Immagine dalla copia nella precedente sezione Visualizzazione).

Best practice:

- | Come lavorare con l'Oggetto Immagine
- | Come creare e collegare la SiteMap del Sito

Approfondimenti:

-

Motori di Ricerca e Ottimizzazione SEO


Oggetto Tabella

Passo 3 - Creazione della Pagina >

Oggetto Tabella

 Return to chapter overview
Mostra/Nascondi testo nascosto

Le tabelle sono un ottimo strumento per organizzare e presentare dei dati.

In molti casi attraverso una tabella è possibile riassumere e presentare i maniera efficace una quantità di dati che altrimenti richiederebbero la stesura di un lungo e prolisso testo descrittivo. Per semplificare, una tabella con le tariffe di un albergo, distinte per tipologia di stanza e periodo dell'anno, è molto più semplice da leggere e interpretare che un testo che riporta in maniera estesa le stesse informazioni.

In più, le tabelle offrono anche in vantaggio di rappresentare un elemento grafico, in grado di abbellire la Pagina e di spezzare la monotonia di un lungo testo.

Ovviamente, perché queste considerazioni siano valide è necessario che le tabelle siano ben strutturate, non risultino troppo complesse, e abbiano un bell'aspetto.

WebSite X5 consente di creare delle Tabelle attraverso un Editor del tutto simile a quello proposto per l'Oggetto Testo. Di default, l'Editor propone una Tabella composta da due righe e tre colonne, dimensionata in modo da occupare completamente in larghezza la Cella della Griglia di impaginazione che la contiene. Naturalmente, è possibile aggiungere o rimuovere righe e colonne, definirne le dimensioni, unire e dividere le celle per creare Tabelle più o meno complesse.

Clicca per espandere/ridurre Reference: I comandi dell'Editor Tabella

La Barra Strumenti dell'Editor mette a disposizione i seguenti comandi:

Taglia [CTRL+X] - Copia [CTRL+C] - Incolla [CTRL+V]

Tagliano, copiano e incollano il testo selezionato. In questo caso, prima di essere incollato, al testo vengono tolte tutte le formattazioni eventualmente associate in origine e assume quelle definite nell'editor.

Incolla speciale

Incolla il testo precedentemente tagliato o copiato attraverso i comandi Taglia e Copia. Il testo incollato mantiene tutte le formattazioni originali.

Annulla [CTRL+Z] - Ripristina [ALT+MAIUSC+BACKSPACE]

Annullano e ripristinano l'ultima operazione eseguita/annullata.

Inserisci Collegamento [CTRL+L]

Imposta un link ipertestuale sulla/e parola/e selezionata/e. E' possibile definire le impostazioni del collegamento attraverso la finestra richiamata Collegamento.

Inserisci Immagine

Inserisce un'immagine (in formato .JPG, .GIF, .PNG, .BMP) all'interno della cella della Tabella. Le Immagini inserite possono essere liberamente ridimensionate attraverso le apposite maniglie di selezione.

Abilita Codice HTML

Permette di immettere direttamente il codice HTML all'interno della Tabella. In modalità HTML, i caratteri < e > non sono interpretati come "minore" e "maggiore" e ciò che è inserito al loro interno viene interpretato come un tag HTML.

Impostazioni per il RollOver

Imposta l'effetto di RollOver sul testo, trasformandolo da statico a scorrevole. E' possibile definire le impostazioni del RollOver attraverso la finestra richiamata RollOver.

Sfondo chiaro/scuro

Imposta un colore chiaro o scuro per lo sfondo dell'Editor: in questo modo è più semplice, per esempio, comporre dei testi che, per avere un giusto contrasto rispetto allo sfondo previsto dal Modello grafico applicato, devono essere di colore bianco.

Aggiungi Riga / Rimuovi Riga / Aggiungi Colonna / Rimuovi Colonna

Aggiungono una riga o una colonna dopo quella in cui è posizionato il cursore del mouse, o rimuovono la riga o la colonna in cui il cursore è posizionato.

Unisci Celle - Dividi Celle

Uniscono più celle adiacenti selezionate in modo da formare un'unica cella, o dividono la cella su cui si sta agendo in due celle affiancate orizzontalmente.

Scelta del font - Dimensione del font

Impostano il tipo di carattere (font) da utilizzare e le dimensioni.

Il menu a tendina propone tutti i font installati sul computer su cui si sta lavorando. E' necessario considerare che se il font utilizzato non è installato anche sul computer di chi navigherà nel Sito, questo verrà automaticamente sostituito con un font di sistema simile a quello di partenza.

Grassetto [CTRL+B] - Corsivo [CTRL+I] - Sottolineato [CTRL+U]

Rendono in grassetto, corsivo e sottolineato il testo selezionato.

Colore del Testo - Colore di Sfondo della Cella

Impostano il colore da applicare al testo selezionato o allo sfondo della cella del testo selezionato.

Stile del bordo della Cella

Imposta lo stile dei bordi delle celle. È possibile definire sia il colore che lo spessore dei bordi che delimitano le righe e/o le colonne della Tabella.

Elenco puntato

Crea un elenco puntato di voci.

Allineamento a sinistra - Allineamento centrato - Allineamento a destra - Allineamento giustificato

Allineano a sinistra, al centro, a destra o giustificano il testo selezionato.

Disponi Testo a destra - Disposizione normale - Disponi Testo a sinistra

Attivi quando viene selezionata un'immagine inserita in una cella insieme a del testo, definiscono la disposizione del testo rispetto all'immagine stessa, facendolo scorrere lungo il lato destro/sinistro dell'immagine o lasciando che l'immagine rimanga inserita nel flusso del testo come una qualsiasi altra parola.

Allineamento in alto - Allineamento nel centro - Allineamento in basso

Allineano verticalmente in alto, al centro o in basso il testo selezionato.

Attraverso il click del tasto destro del mouse è anche possibile richiamare un menu contestuale che, oltre a riproporre i comandi Annulla, Taglia, Copia, Incolla, Incolla speciale e Seleziona tutto, presenta anche i comandi:

§Altezza righe

Impostare, attraverso la finestra richiamata, il valore in pixel dell'altezza delle righe selezionate. Impostando come valore 0, le righe assumono automaticamente l'altezza minima necessaria per visualizzare il contenuto inserito.

§Larghezza colonne

Imposta, attraverso la finestra richiamata, il valore in pixel della larghezza delle colonne selezionate.

Le dimensioni delle righe, delle colonne o delle singole celle possono essere modificate anche posizionando il mouse in corrispondenza dei bordi e trascinandoli fino alla posizione desiderata tenendo premuto il tasto sinistro del mouse. Selezionando una cella e spostandone il bordo sinistro e/o destro vengono modificate solo le dimensioni della cella in questione.


Oggetto Galleria

Passo 3 - Creazione della Pagina >

Oggetto Galleria

 Return to chapter overview
Mostra/Nascondi testo nascosto

La diffusione delle fotocamere digitali e dei servizi online rende straordinariamente semplice pubblicare e condividere intere collezioni di fotografie attraverso il Web. In questo modo è possibile pubblicare le foto di famiglia per farle vedere a parenti e amici lontani, oppure creare album e cataloghi per hobby o per lavoro.

Con WebSite X5 è possibile inserire stupefacenti Gallerie attraverso le quali far vedere non solo le proprie fotografie ma anche i propri video. Ogni Galleria adotta effetti e metodi di navigazione e visualizzazione diversi: possono, per esempio, presentare un barra di controllo, una sequenza o una griglia di miniature. A prescindere dalla tipologia, tutte le Gallerie utilizzano JavaScript e sfruttano specificatamente HTML5 e CSS3 per la realizzazione degli effetti di visualizzazione.

Note sulla compatibilità con le versioni precedenti:

Gallerie in HTML5 vs Gallerie in Flash - Le Gallerie in HTML5 sono state introdotte con la versione 9.1 di WebSite X5 e, nell'attuale versione 10, sostituiscono completamente le precedenti Gallerie in Flash.

Il passaggio alle Gallerie in HTML5 è stato dettato dal fatto che le Gallerie in Flash, pur permettendo un gran numero di effetti di visualizzazione, richiedono l'installazione del Player Flash per la visualizzazione e non sono supportate su dispositivi tablet e mobile con sistema operativo iOS (per esempio, iPad® e iPhone®). D'altro canto, le Gallerie in HTML5 risultano più veloci nel caricamento, non richiedono alcun plug-in e vengono correttamente visualizzate su qualsiasi tipo di dispositivo e sistema operativo moderno.

Su versioni del Browser che non supportano HTML5 e CSS3, le Gallerie in HTML5 funzionano correttamente ma potrebbero non venire riprodotti tutti gli effetti di visualizzazione impostati sulle immagini. In questi casi, gli effetti di visualizzazione non supportati vengono automaticamente sostituiti con l'effetto Dissolvenza.

Solo nel caso in cui la Galleria includa un Video in un formato non supportato da HTML5 o il Browser non supporti l'inclusione del Video in HTML5, questo verrà automaticamente gestito in Flash per permetterne la corretta riproduzione.

Alcune delle Gallerie disponibili propongono una griglia o una striscia di Miniature e utilizzano la finestra ShowBox per la visualizzazione delle corrispondenti Immagini ingrandite. In questi casi, il Visitatore clicca su una Miniatura e apre l'Immagine o il Video corrispondente in un'apposita finestra sovrapposta alla Pagina principale. A questo punto, posizionando il mouse sull'Immagine richiamata, il Visitatore visualizza i pulsanti che gli permettono di passare direttamente all'Immagine precedente/seguente senza dover ritornare alle Miniature.

L'aspetto della finestra ShowBox può essere completamente personalizzato attraverso le opzioni presenti nella sezione Stili e Modelli | ShowBox del Passo 4 - Impostazioni Avanzate.

I comandi necessari per procedere alla creazione di un Oggetto Galleria sono articolati nelle seguenti sezioni: Stile, Elenco e Miniature.

Clicca per espandere/ridurre Reference: I comandi della Sezione Stile

Attraverso i comandi di questa sezione si sceglie il tipo di Galleria da realizzare e se ne definiscono le impostazioni generali.

Le Gallerie disponibili sono le seguenti:

Clicca per espandere/ridurre | SlideShow Classico È una Galleria in cui le Immagini e i Video vengono presentati in sequenza, uno dopo l'altro: se impostato, la modalità di visualizzazione delle Immagini dipende dal tipo di effetto di entrata. Il passaggio da un'Immagine all'altra può essere gestito attraverso i comandi della Barra Controlli. All'interno della Barra Controlli è possibile prevedere la visualizzazione di piccole Miniature per permettere al Visitatore di aprire subito le Immagini o i Video di suo interesse.
Clicca per espandere/ridurre | Galleria Orizzontale In questa Galleria viene proposta una serie di Miniature, posizionate in orizzontale sopra o sotto l'Immagine in primo piano. È sufficiente posizionare il mouse sopra le Miniature perché queste scorrano verso destra/sinistra: cliccando su una Miniatura, l'Immagine o il Video corrispondente viene visualizzato in primo piano. Le Immagini ingrandite vengono visualizzate in base all'effetto di entrata eventualmente impostato.
Clicca per espandere/ridurre | Galleria Verticale Analoga alla precedente, questa Galleria si distingue solo per il fatto che le Miniature vengono visualizzate in verticale, a destra o a sinistra rispetto all'Immagine in primo piano.
Clicca per espandere/ridurre | Miniature Anche in questa Galleria viene presentata una griglia con tutte le Miniature: cliccando su una Miniatura, l'Immagine o il Video corrispondente viene aperto in primo piano attraverso la finestra ShowBox.
Clicca per espandere/ridurre | Miniature su più schede Questa Galleria è analoga alla precedente ma, soprattutto nel caso in cui le Immagini da includere siano molte, permette di dividerle in schede permettendo di impostare il numero massimo di righe di Miniature da visualizzare: il Visitatore potrà passare da una scheda all'altra, rimanendo sempre nella stessa Pagina del Sito, attraverso un'apposita pulsantiera.
Clicca per espandere/ridurre | Miniature Orizzontale In questa Galleria viene visualizzata un'unica striscia orizzontale di Miniature. Cliccando su una Miniatura, l'Immagine o il Video viene visualizzato attraverso la finestra ShowBox.
Clicca per espandere/ridurre | Miniature Verticale Analoga alla precedente, questa Galleria si distingue solo per il fatto che le Miniature vengono visualizzate in verticale.

A seconda del tipo di Galleria selezionato, vengono proposte Impostazioni e opzioni per gestire i Comandi di navigazione diverse.

Impostazioni: | SlideShow Classico | Galleria Orizzontale | Galleria Verticale
§Dimensione: definisce le dimensioni massime in pixel della larghezza e dell'altezza che le Immagini possono assumere. Lasciando attiva l'opzione Mantieni proporzioni, nell'impostazione delle dimensioni viene mantenuta inalterata la proporzione fra la larghezza e l'altezza. | P | P | P
§Miniature visibili: imposta il numero di Miniature che devono essere visualizzate a lato dell'Immagine principale. | - | P | P
§Posizione Miniature: definisce dove devono essere visualizzate le Miniature rispetto all'Immagine principale. | - | P | P
§Font descrizione:specifica il Tipo di carattere, lo Stile e le dimensioni del testo. Queste formattazioni vengono utilizzate per le didascalie create con il campo Descrizione presente nella Sezione Elenco. | P | P | P
§Colonna Sonora: imposta un file musicale da riprodurre come colonna sonora durante la visualizzazione della Galleria. | P | P | P
§Avvia automaticamente: fa in modo che la riproduzione di Immagini e Video parta automaticamente non appena la Galleria viene visualizzata. | P | P | P
§Riproduci in ordine casuale: fa in modo che le Immagini e i Video vengano proposti non in base all'ordine di inserimento ma in base a una sequenza determinata casualmente. | P | P | P
Comandi di navigazione:
§Visualizzazione pulsanti: definisce se e come devono essere visualizzati dei pulsanti di navigazione direttamente ai lati dell'Immagine principale della Galleria per permettere al Visitatore di passare alla precedente/successiva. È possibile fare in modo che questi pulsanti siano Sempre visibili, Non visibili (avvio automatico) o Visibili su passaggio del mouse. | P | - | -
§Stile pulsanti: definisce lo stile dei pulsanti visualizzati direttamente ai lati dell'Immagine principale della Galleria, scegliendo fra le grafiche proposte. | P | - | -
§Mostra Barra Controlli: attiva di default, imposta la visualizzazione su passaggio del mouse di una Barra Controlli attraverso la quale il Visitatore può gestire la navigazione fra le Immagini e i Video della Galleria. Di base, la Barra Controlli presenta i pulsanti [image] Avvia presentazione, [image] Immagine precedente e [image] Immagine successiva. | P | P | P
§Colore: specifica il colore di sfondo della Barra Controlli. | P | P | P
§Visualizza Miniature nella Barra Controlli: attiva di default, aggiunge una lista di miniature delle Immagini della Galleria nella Barra Controlli che viene visualizzata su passaggio del mouse. In questo modo, il Visitatore non è vincolato a una consultazione sequenziale ma può visualizzare subito le Immagini o i Video che più gli interessano. | P | - | -

Impostazioni: | Miniature | Miniature su più schede | Miniature Orizzontale | Miniature Verticale
§Miniature visibili: definisce il numero delle Miniature che devono essere effettivamente visualizzate. | P | - | P | P
§Numero di righe per scheda: imposta il numero di righe della matrice in cui le Miniature vengono organizzate. | - | P | - | -
§Mostra ingrandimento su click tramite ShowBox: attiva sulle Miniature il collegamento per la visualizzazione nella finestra ShowBox dell'Immagine o del Video corrispondente. | P | P | P | P
§Dimensione: disponibile solo nel caso in cui sia attiva l'opzione Mostra ingrandimento su click tramite ShowBox, definisce le dimensioni massime in pixel della larghezza e dell'altezza della finestra ShowBox. Lasciando attiva l'opzione Mantieni proporzioni, nell'impostazione delle dimensioni viene mantenuta inalterata la proporzione fra la larghezza e l'altezza. | P | P | P | P
Clicca per espandere/ridurre Reference: I comandi della Sezione Elenco

Attraverso i comandi di questa sezione si compone la lista di Immagini e Video che devono essere inseriti nella Galleria.

Tutti i file già importati vengono visualizzati nella Lista di file: selezionando un file fra quelli inseriti in tale lista se ne visualizzare l'anteprima nell'apposita finestra.

Nella Lista di file, per ogni Immagine e Video inserito, viene riportato: il percorso del file, l'effetto di comparsa eventualmente associato, un segno di spunta per indicare l'associazione di un collegamento e di una descrizione.

I comandi disponibili per comporre l'Oggetto Galleria sono:

§Aggiungi... / Rimuovi: aggiungono nuovi file o rimuovono quelli selezionati fra quelli già inseriti. Possono essere importati file grafici in formato: .JPG, .GIF, .PNG, .PSD, .BMP, .TIF, .DIB, .PCX, .RLE, .TGA, .WMF. In più, possono essere importati file video in formato: .FLV e .MP4.

Cliccando sul triangolino presente sul pulsante Aggiungi... è possibile visualizzare un sotto-menu con le seguenti voci: Aggiungi Immagine..., Aggiungi Video... e Aggiungi Video YouTube/Vimeo....

Clicca per espandere/ridurre

Tramite la finestra richiamata dal comando Aggiungi Video YouTube/Vimeo... è possibile specificare l'indirizzo URL del video già pubblicato su portali come YouTube™ o Vimeo che si vuole inserire.

§Sposta sopra / Sposta sotto: agiscono sull'ordine di visualizzazione dei file già inseriti nella Lista dei file, spostando verso l'alto o verso il basso quello selezionato.

§Modifica...: richiama l'Editor Immagine interno per modificare l'Immagine selezionata nella Lista dei file.

In base al tipo di Galleria scelta, per ciascun Immagine/Video inserito può essere possibile definire alcune Opzioni:

§Collegamento: imposta un link sull'Immagine/Video selezionato fra quelli presenti nella Lista di file.

§Cliccando sul pulsante [image] viene richiamata la finestra Collegamento attraverso la quale è possibile scegliere il tipo di azione oltre che le relative opzioni. Nel caso delle Gallerie che utilizzano le Miniature, il collegamento così impostato sostituisce quello con l'Immagine ingrandita anche se viene attivata l'opzione Mostra ingrandimento su click tramite ShowBox.

§Effetto: imposta, attraverso la finestra Proprietà Effetto richiamata cliccando sul pulsante [image] un effetto di entrata, movimento e zoom sull'Immagine/Video selezionato fra quelli presenti nella Lista dei file.

Su versioni del Browser che non supportano HTML5 e CSS3, le Gallerie in HTML5 funzionano correttamente ma potrebbero non venire riprodotti tutti gli effetti di visualizzazione impostati sulle immagini. In questi casi, gli effetti di visualizzazione non supportati vengono automaticamente sostituiti con l'effetto Dissolvenza.

§Descrizione: campo per digitare un testo di descrizione per l'Immagine o il Video selezionato nella Lista dei file. Il testo di descrizione viene riportato in calce nella finestra che visualizza l'Immagine o il Video ingrandito.
Clicca per espandere/ridurre Reference: I comandi della Sezione Miniature

Attraverso i comandi di questa sezione si definisce l'aspetto grafico delle Miniature delle Gallerie che le prevedono.

La Miniatura è una versione rimpicciolita dell'Immagine o del Video inserito nella Galleria e viene creata automaticamente dal Programma. Per essere più belle, le Miniature vengono presentate all'interno di telai che le rendono simili a diapositive, fotogrammi di una pellicola, post-it, ecc.

Per definire l'aspetto delle Miniature si può utilizzare:

§Immagine predefinita: propone una lista di telai predefiniti fra cui è possibile selezionare quello da applicare alle Miniature.

§Immagine personalizzata: richiama il file grafico (in formato .JPG, .GIF, .PNG, .BMP, .PSD, .TIF, .DIB, .PCX, .RLE, .TGA, .WPG) corrispondente al telaio che si intende utilizzare.

Per creare un nuovo telaio è sufficiente preparare l'immagine e salvarla in un apposito file: è preferibile che l'immagine del telaio sia quadrata e, se è necessario mantenere una trasparenza esterna, salvarla in formato .PNG.

Per le Miniature è anche possibile agire sulle seguenti Opzioni:

§Margine esterno all'immagine (%): definisce il margine che deve essere mantenuto fra l'Immagine della Miniatura e il telaio circostante.

§Attiva variante di colore: specifica il colore verso il quale deve virare il telaio delle Miniature. In pratica, viene applicato un effetto "colorize" sull'immagine del telaio in modo da virarla verso il colore desiderato.

L'effetto relativo alla variante di colore può essere utilmente impiegato solo su telai che non siano di colore nero o bianco: in questi casi, infatti, il "colorize" non apporta alcuna variazione di tinta.

Le Gallerie possono essere lanciate anche attraverso un apposito collegamento inserito all'interno delle Pagine: per maggiori informazioni vedere Collegamento.


Oggetto Video/Suono

Passo 3 - Creazione della Pagina >

Oggetto Video/Suono

 Return to chapter overview
Mostra/Nascondi testo nascosto

Con WebSite X5 è possibile creare siti capaci anche di intrattenere piacevolmente gli Utenti proponendo, per esempio, video e brani musicali.

Attualmente i video stanno conoscendo un grado di diffusione impensabile fino a poco tempo fa: fare un filmato, riversarlo su computer, editarlo e quindi metterlo online è diventato un processo alla portata di tutti.

Con WebSite X5 è possibile importare molto semplicemente qualsiasi tipo di video, inserirlo nel proprio Sito e, in questo modo, condividerlo. WebSite X5 accetta tutti i principali formati e utilizza un Player interno per la riproduzione dei file .FLV e .MP4. Permette di importare sia file locali che file già pubblicati online, inclusi quelli di portali come YouTube™ e Vimeo.

I comandi necessari per procedere alla creazione di un Oggetto Video/Suono sono articolati nelle seguenti sezioni: Generale e SiteMap.

Clicca per espandere/ridurre Reference: I comandi della Sezione Generale

Attraverso i comandi di questa sezione si procede all'importazione del file da utilizzare per la creazione dell'Oggetto Video/Suono e si definiscono alcune impostazioni relative alla modalità di riproduzione.

L'Oggetto Video/Suono può essere inserito in modi diversi a seconda di dove risieda la risorsa da importare:

§File locale su PC: attivata questa opzione, è sufficiente cliccare sul pulsante [image] per sfogliare le risorse disponibili sul PC locale e individuare il file in formato .MP4, .WEBM, .OGG, .FLV, .AVI, .WMV, .MPG, .MOV, .MP3, .WMA, .WAV, .MID, .AIF, .M4A da importare.

§File su Internet: attivata questa opzione, è necessario digitare nell'apposito campo l'indirizzo URL presso il quale il file del Video o dell'Audio è già disponibile online.

§URL del Video YouTube/Vimeo: attivata questa opzione, occorre digitare nell'apposito campo l'indirizzo URL della pagina di portali come YouTube™ o Vimeo contenente il Video/Audio che si vuole importare.

Inserendo in questo modo un Video pubblicato su YouTube™, le dimensioni originarie vengono modificate in base alle impostazioni di WebSite X5. Se si vuole mantenere un maggior controllo, si consiglia di importare il video YouTube™ attraverso l'Oggetto HTML e Widgets piuttosto che attraverso l'Oggetto Video/Suono.

L'anteprima dell'Oggetto Video/Suono importato può essere visualizzata nell'apposita finestra, attivando l'opzione Anteprima.

A seconda del formato del file Video/Audio importato, viene utilizzato un Player diverso per la visualizzazione/riproduzione. Per i file in formato .MP4, .WEBM e .OGG, se il Browser supporta il tag video di HTML5 e il codec del file, viene impiegato il supporto nativo del Browser tramite WebSite X5 Media Player. In caso contrario, e per tutti gli altri formati, vale quanto segue:

Player | File Video | File Audio
Adobe Flash Player® | .MP4 e .FLV | .MP3
Microsoft® Windows Media Player® | .AVI, .WMV e .MPG | .WAV e .WMA
QuickTime® Player | .MOV | .M4A e .AIF

Per garantire la massima compatibilità, si consiglia di utilizzare il formato .MP4.

A prescindere dal Player utilizzato per la visualizzazione/riproduzione del file importato, è possibile definire le seguenti Proprietà:

§Testo alternativo: è il testo che viene presentato in alternativa al Video o al Suono quando questi non possono essere riprodotti.

§Dimensioni: specifica le dimensioni in pixel della larghezza e dell'altezza del Video o della Barra Controlli per il Suono. Per la larghezza, tra parentesi viene riportato il valore massimo che può essere assunto dall'Oggetto, in base a come è impostata la Griglia di impaginazione. Per i Suoni, viene ricordato riportandolo tra parentesi che il valore massimo per l'altezza della Barra Controlli è di 35 pixel. Il valore minimo è, invece, di 15 pixel. Lasciando attiva l'opzione Mantieni proporzioni, nell'impostazione delle dimensioni viene mantenuta inalterata la proporzione fra la larghezza e l'altezza.

§Avvia automaticamente: imposta l'avvio automatico della riproduzione del Video o dell'Audio.

§Abilita visualizzazione a pieno schermo: rende disponibile nella Barra Controlli il comando per portare a pieno schermo la finestra in cui viene visualizzato il Video.

È poi possibile gestire la visualizzazione della Barra Controlli:

§Mostra Barra Controlli: imposta la visualizzazione di una pulsantiera con tutti i comandi per gestire la riproduzione del Video o del Suono.

Solo nel caso in cui per la visualizzazione/riproduzione del file importato venga utilizzato il WebSite X5 Media Player, per la gestione della Barra Controlli sono disponibili anche le seguenti opzioni:

§Nascondi automaticamente Barra Controlli: fa in modo che la Barra Controlli venga visualizzata solo in concomitanza del passaggio del mouse sulla finestra in cui viene riprodotto il Video/Audio.

§Colore: specifica il colore di sfondo della Barra Controlli.

Per i Video in formato Microsoft® o QuickTime® non viene utilizzato il WebSite X5 Media Player e questo non permette di garantire una corretta gestione della Barra Controlli.
Clicca per espandere/ridurre Reference: I comandi della Sezione SiteMap

Attraverso i comandi di questa sezione si specificano alcune informazioni aggiuntive sul Video, utili per completare la SiteMap del Sito.

Innanzi tutto occorre attivare l'opzione Aggiungi video alla SiteMap: in questo modo la SiteMap che viene creata automaticamente da WebSite X5 (vedere, Crea automaticamente la SiteMap in Impostazioni Generali | Esperto) viene completata con le informazioni relative al Video. Fatto questo è quindi necessario definire le seguenti impostazioni:

§Titolo: (parametro obbligatorio) specifica il titolo da associare al Video. Il limite imposto da Google™ per la lunghezza dei titoli è di 100 caratteri.

§Descrizione breve: (parametro obbligatorio) specifica un breve testo descrittivo per il Video. Il limite imposto da Google™ per la lunghezza delle descrizioni è di 2048 caratteri: descrizioni più lunghe vengono troncate.

§Categoria: (parametro opzionale) specifica una categoria a cui il Video, per il suo contenuto, può appartenere. Google™ specifica che ogni Video può appartenere a un'unica categoria e impone il limite per la lunghezza del nome della categoria a 256 caratteri.

§Parole chiave per la ricerca: (parametro opzionale) specifica una lista di tag, ovvero di brevi descrizioni dei concetti chiave associati al Video. Google™ specifica che ogni Video può avere al massimo 32 tag.

§Immagine di anteprima del Video: (parametro obbligatorio) specifica un'immagine di anteprima da associare al Video. Google™ consiglia di utilizzare per queste miniature una dimensione minima di 120x90 pixel e di salvarle in formato .JPG, .PNG o .GIF.

§Data di pubblicazione: (parametro opzionale) specifica la data di pubblicazione del Video.

§Durata (sec): (parametro opzionale) specifica la durata in secondi del Video. Google™ raccomanda fortemente di inserire questa informazione e specifica che il valore inserito deve essere compreso tra 0 e 28800 (equivalente a 8 ore).

§Contenuto adatto a minorenni: (parametro opzionale) specifica se il contenuto del Video è idoneo per la visione da parte di un pubblico minorenne. Google™ avverte che se un Video non viene impostato come adatto ai minorenni, sarà disponibile solo per utenti con il filtro Google Safesearch™ disattivo. Ricordiamo che la funzione Safesearch di Google™ filtra i Siti con contenuti sessuali o pornografici espliciti e li rimuove dai risultati di ricerca.

Best practice:

- | Come lavorare con l'Oggetto Video/Suono
- | Come creare e collegare la SiteMap del Sito

Approfondimenti:

-

Motori di Ricerca e Ottimizzazione SEO


Oggetto Modulo Invio E-mail

Passo 3 - Creazione della Pagina >

Oggetto Modulo Invio E-mail

 Return to chapter overview
Mostra/Nascondi testo nascosto

Navigando in Internet, capita spesso di visualizzare pagine contenenti dei Moduli di cui viene richiesta la compilazione per l'invio tramite E-mail di dati raccolti. Tali Moduli vengono utilizzati come semplici form di contatto, per richiedere la registrazione a particolari servizi o l'accesso ad aree riservate attraverso password o, ancora, per realizzare sondaggi e ricerche.

Qualsiasi sia la finalità, WebSite X5 consente di creare un Modulo di Invio E-mail in maniera molto semplice, permettendo di specificare i campi necessari, di agire sull'impaginazione e l'aspetto grafico e, soprattutto, di stabilire come deve avvenire l'invio e la raccolta dei dati.

I comandi necessari per procedere alla creazione di un Oggetto Modulo Invio E-mail sono articolati nelle seguenti sezioni: Elenco, Invio e Stile.

Clicca per espandere/ridurre Reference: I comandi della Sezione Elenco

Attraverso i comandi di questa sezione si definisce la lista di Campi di cui si deve comporre un Modulo (o Form) E-mail.

Tutti i Campi già creati vengono visualizzati nella Tabella riassuntiva che, per ciascuno di essi, riporta: Nome Campo, Tipo di Campo, Larghezza, se è stato reso Obbligatorio e Descrizione. Tutti questi parametri possono essere impostati in fase di creazione del Campo, attraverso l'apposita finestra Inserimento Campo.

La Tabella, oltre a riassumere i principali dati su tutti i Campi inseriti, è anche un utile strumento di lavoro permettendo varie operazioni:

§Facendo doppio click su un Campo, si apre la finestra Inserimento Campo e si può procedere alla sua modifica;

§Cliccando una seconda volta su un Campo già selezionato se ne può modificare il Nome: equivale ad aprire la finestra Inserimento Campo e a cambiare il testo inserito come Etichetta;

§Dopo aver selezionato un Campo è possibile utilizzare i comandi della pulsantiera a lato per crearne una copia, eliminarlo, spostarlo in alto o in basso, modificarne le impostazioni.

In più, attraverso la Tabella è anche possibile controllare la disposizione dei Campi nel Modulo. Innanzitutto, un leggero tratteggio indica le righe su cui si svilupperà il Modulo. Inoltre, se un Campo viene affiancato al precedente, accanto all'indicazione della sua larghezza, viene visualizzata l'icona [image] . Infine, se le larghezze dei Campi impostati come affiancati sulla stessa riga eccedono il 100% dello spazio disponibile, l'icona con un punto esclamativo [image] segnala l'imprecisione: se non si modificano le larghezze, i Campi rimarranno disposti su righe diverse.

A fianco alla Tabella sono presenti i comandi utili per procedere alla creazione della lista dei Campi che andranno a comporre il Modulo:

§Aggiungi...: richiama la finestra Inserimento Campo per procedere all'inserimento di un nuovo Campo all'interno del Modulo.

§Duplica: crea una copia del Campo selezionato fra quelli già inseriti nel Modulo.

§Rimuovi: elimina il Campo selezionato fra quelli già inseriti nel Modulo.

§Sposta Sopra / Sposta Sotto: agiscono sull'ordine di visualizzazione dei Campi già inseriti nel Modulo, spostando verso l'alto o verso il basso quello selezionato.

§Modifica...: richiama la finestra Inserimento Campo per modificare le impostazioni del Campo selezionato fra quelli già inseriti nel Modulo.

I pulsanti Invia, per l'invio del modulo compilato, e Reset, per cancellare tutti i dati eventualmente inseriti nel modulo, vengono automaticamente creati dal Programma e posizionati al termine della Form.
Clicca per espandere/ridurre Reference: I comandi della Sezione Invio

Attraverso i comandi di questa sezione si definiscono le modalità relative all'invio dei dati raccolti attraverso il Modulo di Invio E-mail creato.

Nel riquadro Invio dei dati viene richiesto di specificare come i dati raccolti attraverso il Modulo devono essere inviati al gestore del Sito. È possibile scegliere fra le seguenti alternative:

Invia i dati per e-mail: è l'opzione prevista di default. I dati raccolti attraverso il Modulo vengono automaticamente inviati tramite e-mail, sfruttando uno script PHP già predisposto.

Invia i dati ad un Database: i dati raccolti attraverso il Modulo vengono inviati automaticamente al database MySQL specificato, tramite uno script PHP già predisposto.

Invia i dati ad un file: i dati raccolti attraverso il Modulo vengono gestiti sfruttando lo script che viene specificato (.PHP, .ASP, ecc.). Questa opzione è utile se si vuole utilizzare un proprio script, per esempio per procedere all'invio dei dati se .PHP non è disponibile sul proprio Server, oppure se si vogliono attivare procedure e gestioni particolari.

In base al metodo di invio selezionato occorre specificare una serie di parametri:

Invia i dati per e-mail:

§E-mail mittente: specifica quale indirizzo utilizzare come mittente della e-mail che viene inviata con i dati raccolti attraverso il Modulo creato.

Di default come e-mail del mittente viene utilizzata la stessa e-mail del destinatario che, in questo caso, corrisponde con il gestore del Sito. Specificando di usare come e-mail del mittente quella del Visitatore che ha compilato la Form sarà possibile, per esempio, utilizzare direttamente il comando Rispondi del programma di Posta Elettronica.

§E-mail destinatario: specifica a quale indirizzo e-mail devono essere inviati i dati raccolti attraverso il Modulo creato. È possibile specificare più di un indirizzo e-mail: per farlo occorre digitare tutti gli indirizzi e-mail separati da un punto e virgola (;).

§Oggetto: specifica l'oggetto della e-mail contenente i dati raccolti attraverso il Modulo creato.

§Messaggio: specifica il testo che nella e-mail introduce ai dati raccolti attraverso il Modulo creato.

§Includi in coda i dati raccolti in formato CSV: fa in modo che i dati raccolti vengano salvati anche in un file di formato .CSV, incluso in coda alla e-mail inviata. In un file .CSV i dati vengono riportati in forma testuale, come un lungo elenco di voci separate da un punto e virgola (;): tali file possono essere agevolmente importati nei programmi per la gestione dei fogli di calcolo (per esempio, Microsoft Excel).

Invia i dati ad un Database:

§Nome Database: specifica il nome del Database da utilizzare, scegliendolo dalla lista di quelli collegati al Progetto corrente. La lista dei Database collegati al Progetto deve essere precedentemente compilata attraverso gli appositi comandi della finestra Gestione Dati.

§Nome Tabella: in questo campo si deve inserire il nome della Tabella, all'interno del Database, in cui si vogliono raccogliere i dati. Se si inserisce il nome di una Tabella non ancora esistente, questa verrà creata automaticamente.

§Invia e-mail di notifica di ricezioni dati: fa in modo che venga inviata automaticamente una e-mail di notifica quando vengono ricevuti nuovi dati.

§E-mail destinatario: specifica l'indirizzo a cui deve essere inviata l'e-mail di notifica di ricezione dei dati.

Invia i dati ad un file:

§File di elaborazione dati (es: PHP, ASP): permette di importare il file di elaborazione che si vuole utilizzare per raccogliere i dati dalla Form e inviarli. In questo caso il file di elaborazione deve essere creato manualmente per risolvere il compito desiderato.

Nel riquadro E-mail di conferma all'utente, se come metodo di Invio dei dati non viene scelto Invia i dati ad un file, vengono presentate le seguenti opzioni:

§Invia e-mail di conferma all'Utente che compila il modulo: attivando questa opzione, è possibile fare in modo che dopo aver compilato il modulo e inviato i dati, il Visitatore riceva automaticamente una e-mail di conferma.

§E-mail mittente: campo per digitare un indirizzo e-mail valido e attivo da utilizzare come mittente dell'e-mail di conferma.

Di default come e-mail del mittente, che in questo caso è l'e-mail del gestore del Sito, viene utilizzato l'indirizzo introdotto come E-mail destinatario specificata nella sezione Invio dei dati. Digitando una diversa E-mail mittente è possibile inviare le e-mail di conferma da un indirizzo diverso da quello su cui si ricevono le e-mail provenienti dal Modulo. Questa opzione è utile nel caso in cui si preferisca utilizzare per le comunicazioni con i Visitatori un indirizzo generico (info@miaazienda.com oppure noreply@miaazienda.com) piuttosto che un indirizzo personale (nome.cognome@miaazienda.com).

§E-mail destinatario: specifica da quale dei Campi inseriti nel Modulo ricavare l'indirizzo di posta elettronica del Visitatore a cui inviare l'e-mail di conferma.

§Oggetto: specifica l'oggetto della e-mail di conferma.

§Messaggio: specifica il messaggio della e-mail di conferma.

§Includi in coda i dati raccolti: aggiunge in coda alla e-mail di conferma i dati raccolti attraverso il Modulo compilato.

Infine, nel riquadro Opzioni vengono presentate le seguenti opzioni:

§Attiva controllo anti-spam 'Captcha': aggiunge al termine del Modulo di Invio e-mail il controllo anti-spam del Captcha. In pratica, viene inserita l'immagine di alcune lettere visualizzate in maniera distorta su uno sfondo confuso: il Visitatore deve ricopiare correttamente le lettere in un apposito Campo al fine di poter inviare il messaggio.

§Pagina di Conferma dopo l'invio dei dati: visualizza la Mappa del Sito per definire quale Pagina deve essere automaticamente visualizzata una volta che il Modulo è stato compilato e i dati raccolti sono stati inviati per e-mail. Piuttosto che rimandare direttamente alla Home Page, è meglio predisporre una Pagina specifica con un messaggio di ringraziamento: questa Pagina dovrà essere resa come una Pagina non visibile sul Menu attraverso l'apposito comando disponibile nel Passo 2 - Creazione della Mappa.

Per la personalizzazione dell'aspetto grafico delle e-mail inviate automaticamente attraverso il Modulo creato è necessario agire sulle opzioni proposte nella finestra Stili e Modelli | E-mail del Passo 4 - Impostazioni Avanzate.
Clicca per espandere/ridurre Reference: I comandi della Sezione Stile

Attraverso i comandi di questa sezione si definiscono alcune impostazioni grafiche relative all'aspetto del Modulo di Invio e-mail che si sta creando.

Innanzi tutto occorre selezionare l'Elemento del Modulo su cui si intende lavorare: è possibile farlo attraverso il menu a discesa dell'omonima opzione oppure cliccando direttamente sull'elemento nella finestra di Anteprima disponibile.

Gli elementi su cui è possibile agire sono:

Etichette di testo: è il testo di descrizione del Campo e serve per specificare l'informazione richiesta o immettere il testo della domanda che si vuole porre.

Campi: è il riquadro all'interno del quale il Visitatore potrà digitare l'informazione richiesta.

Pulsanti di 'Invio' e 'Reset': sono i pulsanti inseriti automaticamente al termine del Modulo di Invio E-mail. Servono, rispettivamente, per inviare tutti i dati immessi nei Campi e per svuotare i Campi dei valori eventualmente presenti.

Descrizione e Validazione dei campi: si tratta dei messaggi visualizzati per dare informazioni aggiuntive su come compilare i Campi, per invitare a correggere un dato immesso o per esortare a completare un Campo Obbligatorio lasciato vuoto.

In base all'elemento del Modulo selezionato è possibile agire su diverse opzioni presentate nella sezione Stile:

Etichette di testo:

§Tipo di Font: specifica il Tipo di carattere, lo Stile e le dimensioni del testo.

§Colore: specifica il colore che deve essere utilizzato per il testo.

§Disposizione: definisce dove deve essere posizionata l'Etichetta rispetto al Campo. È possibile scegliere fra tre opzioni: Mostra Etichette sopra ai Campi, Mostra Etichette dentro i Campi e Mostra Etichette alla sinistra dei Campi. Se si sceglie di posizionare le Etichette a sinistra dei Campi è possibile definire la Larghezza (%), ovvero la percentuale dello spazio della riga che dovrà essere occupato dall'Etichetta stessa, e Allineamento del testo dell'Etichetta.

Campi:

§Colore: specifica il colore che deve essere utilizzato per il testo (nello stato normale e "su selezione"), per lo sfondo (nello stato normale e "su selezione") e per il bordo (nello stato normale e "su errore").

§Smusso: definisce il fattore di smusso per gli angoli, anche singolarmente.

§Ombra interna: applica un'ombra all'interno dei campi in modo da dare un senso di profondità.

Pulsanti di 'Invio' e 'Reset':

§Tipo di Font: specifica il Tipo di carattere, lo Stile e le dimensioni del testo.

§Colore: specifica il colore che deve essere utilizzato per il testo, per lo sfondo e per il bordo dei pulsanti.

§Smusso: definisce il fattore di smusso per gli angoli, anche singolarmente.

§Immagine di sfondo: seleziona il file grafico (.JPG, .GIF, .PNG.) relativo all'immagine da utilizzare come sfondo.

§Mostra Pulsante 'Reset': attiva di default, fa in modo che al termine del Modulo venga automaticamente inserito anche il pulsante "Reset" (utile per svuotare i campi già compilati) oltre al pulsante "Invio".

Descrizione e Validazione dei campi:

§File icona per Descrizione Campo: importa un file grafico (formato .JPG, .GIF e .PNG) da utilizzare come icona da affiancare al Campo per indicare la disponibilità di maggiori informazioni.

§Visualizza la Descrizione su selezione del Campo: attivando questa opzione il messaggio con le informazioni aggiuntive viene automaticamente visualizzato non appena si clicca all'interno del Campo.

§In presenza di errori durante la validazione dei dati: definisce come deve essere visualizzato il messaggio previsto nel caso in cui un Campo non sia stato compilato correttamente o, se impostato come Obbligatorio, sia stato lasciato vuoto. È possibile scegliere fra una delle seguenti opzioni: Mostra finestra di dialogo del Browser, Mostra finestra di popup interna o Mostra Tip a fianco del Campo non valido.

Quando si testa il funzionamento del Sito creato in locale, una finestra d'avviso avverte che le e-mail con i dati raccolti attraverso il Modulo non verranno inviate. Il Modulo Invio E-mail funziona pienamente solo con la pubblicazione del Sito su Server.

Per il corretto funzionamento del Modulo Invio E-mail è necessario che il Server sul quale il Sito verrà pubblicato supporti il linguaggio di programmazione .PHP e che sia attivo il comando MAIL. Attraverso la sezione WebSite Test del Pannello di Controllo online è possibile avere queste informazioni di diagnostica sul Server.

Se si verificano dei problemi nell'invio delle e-mail è probabile che il Server utilizzato non sia configurato in modo standard. In questi casi è consigliabile provare a modificare le impostazioni relative allo script e al metodo utilizzati per l'invio delle e-mail attraverso le apposite opzioni presenti in Impostazioni Avanzate | Gestione Dati. Per ulteriori informazioni in merito, contattare il proprio Provider di spazio Web.

Best practice:

-

Come lavorare con l'Oggetto Modulo Invio E-mail


ins_form_campi

Finestra Inserimento Campo

Passo 3 - Creazione della Pagina > Oggetto Modulo Invio E-mail >

Finestra Inserimento Campo

 Return to chapter overview
Mostra/Nascondi testo nascosto

La finestra Inserimento Campo, richiamata attraverso i pulsanti Aggiungi... e Modifica... presenti nella finestra Oggetto Modulo Invio E-mail, consente di procedere alla creazione e definizione effettiva dei Campi che andranno a comporre il Modulo Invio E-mail.

Questa finestra presenta le seguenti sezioni: Tipo di Campo e Opzioni.

Clicca per espandere/ridurre Reference: I comandi della sezione Tipo di Campo

Attraverso le opzioni presenti in questa sezione si crea la lista di Campi di cui si dovrà comporre il Modulo Invio E-mail.

I tipi di Campo fra cui è possibile scegliere sono:

Campo Testo: campo di testo disposto su una sola riga che viene visualizzato come un riquadro vuoto all'interno del quale il Visitatore può digitare liberamente la risposta che reputa più opportuna.

Posta elettronica: campo di testo specifico per richiedere al Visitatore di fornire un indirizzo di posta elettronica. In questi casi, viene automaticamente impostato un filtro per controllare l'esattezza del dato immesso: per esempio, per essere ritenuto valido un indirizzo deve contenere il carattere "@" e presentare un punto nel testo a seguire.

Area di Testo: campo di testo disposto su più righe, specifico per permettere al Visitatore di lasciare un proprio commento o fare una domanda.

Data: campo di testo specifico per richiedere al Visitatore di fornire una data. La data richiesta può essere digitata o impostata attraverso un apposito calendario.

Lista a discesa: le possibili risposte, fra cui il Visitatore può selezionarne una sola, sono presentate come voci di una lista a tendina.

Lista: le possibili risposte, fra cui il Visitatore può selezionarne una sola, sono presentate come voci di una lista.

Scelta Multipla: le possibili risposte, fra cui il Visitatore può selezionarne anche più di una, sono presentate una di seguito all'altra, come in un elenco puntato.

Scelta Singola: le possibili risposte, fra cui il Visitatore può selezionarne una sola, sono presentate una di seguito all'altra, come in un elenco puntato.

Password: campo di testo in cui i caratteri digitati vengono automaticamente nascosti, ovvero visualizzati come dei "pallini" o degli asterischi (in base al Sistema Operativo in uso). È utile per permettere ai Visitatori di specificare la password con cui vogliono registrarsi per accedere a un servizio.

File Allegato: campo di testo in cui il Visitatore, attraverso il pulsante [image] per sfogliare le risorse disponibili, può specificare il file che desidera inviare come allegato.

Per il corretto funzionamento dei file allegati è necessario contattare il proprio Provider dello Spazio Web per verificare che il servizio sia attivo.

Domanda di Controllo: campo di testo in cui il Visitatore deve digitare la risposta a una domanda posta con l'intento di discriminare fra utenti reali e programmi che sfruttano i moduli di contatto pubblicati online per l'invio di posta indesiderata.

Condizioni di Accettazione: campo di testo in cui vengono riportate le condizioni che il Visitatore deve accettare per procedere nell'invio dei dati. Tale campo può essere utilizzato, per esempio, per presentare le norme a cui ci si attiene per la tutela della privacy nel trattamento dei dati raccolti.

Separatore: non è un campo ma un separatore grafico che serve per organizzare i campi in sezioni e rendere più fruibili Moduli lunghi, che richiedono l'inserimento di molte informazioni.

A seconda del tipo di Campo selezionato, vengono presentate diverse opzioni sulle quali è possibile agire. Le opzioni comuni a tutti i Campi sono:

§Etichetta: definisce la descrizione da associare al Campo. Questo testo verrà visualizzato sopra, a fianco o all'interno del Campo a cui fa riferimento e deve essere utilizzato per specificare l'informazione richiesta o per riportare il testo della domanda che si vuole porre al Visitatore.

§Larghezza (%): definisce la larghezza del Campo e può assumere un valore variabile dal 5% al 100% dello spazio disponibile.

§Visualizza nella stessa riga del Campo precedente: fa in modo che il Campo non occupi una nuova riga ma sia affiancato al Campo precedente. L'effettivo affiancamento di due Campi sulla stessa riga è possibile solo se hanno larghezze tali che sommate non superano il 100% dello spazio disponibile.

§Imposta come Campo Obbligatorio: rende obbligatoria la risposta da parte del Visitatore. L'opzione non è disponibile per i Campi Scelta Multipla ed è attivata di default per i Campi Domanda di Controllo.

Oltre a quelle comuni, per ciascun tipo di Campo si aggiungono le seguenti opzioni specifiche:

Campo Testo:

§Numero massimo di caratteri: specifica il numero massimo di caratteri digitabili nel Campo.

Per esempio, si può fissare a 15 il numero massimo di caratteri per un Campo di testo destinato a raccogliere il Codice Fiscale del Visitatore.

§Filtro sull'inserimento del testo: imposta un controllo sulla correttezza dei dati inseriti dal Visitatore nel Campo. È possibile scegliere fra i seguenti filtri:

-Nessuno (caratteri e numeri): viene accettato l'inserimento sia di caratteri che di numeri.

-Solo Numeri: viene accettato solo l'inserimento di numeri.

-Numero di Telefono/Fax (numeri e caratteri ' ' e '-'): viene accettato l'inserimento di numeri, del carattere "-" e dello spazio.

-Data (numeri e caratteri '/' e '.'): viene accettato l'inserimento di numeri e del carattere "/".

Posta elettronica:

§Richiedi conferma correttezza indirizzo e-mail: aggiunge automaticamente un Campo in cui il Visitatore deve digitare una seconda volta il proprio indirizzo e-mail. Verrà controllata l'esatta corrispondenza dell'indirizzo e-mail digitato nei due Campi e, se necessario, visualizzato un messaggio di avviso.

Area di Testo:

§Numero massimo di caratteri: specifica il numero massimo di caratteri digitabili nel Campo.

§Numero di righe: definisce l'altezza del Campo, specificando il numero di righe visualizzate (con un massimo di 30).

Data:

§Formato Data: specifica in che formato deve essere digitata la data, scegliendo fra le consuete formulazioni nazionali e internazionali.

§Mostra icona 'Calendario': visualizza accanto al Campo Data l'icona "Calendario". Cliccando su questa icona viene visualizzato un calendario attraverso il quale il Visitatore può impostare la data senza doverla digitare.

Lista:

§Numero di righe: definisce l'altezza del Campo, specificando il numero di righe visualizzate (con un massimo di 30).

Scelta Multipla/Scelta Singola:

§Numero di colonne: definisce il numero di colonne su cui devono essere disposte le possibili modalità di risposta.

Password:

§Richiedi conferma correttezza password: aggiunge automaticamente un Campo in cui il Visitatore deve digitare una seconda volta la password scelta. Verrà controllata l'esatta corrispondenza della password digitata nei due Campi e, se necessario, visualizzato un messaggio di avviso.

Domanda di Controllo:

§Risposta corretta: specifica la risposta corretta che verrà confrontata con quella data dal Visitatore.

Condizioni di Accettazione:

§Testo della condizione: specifica il testo delle condizioni che il Visitatore dovrà accettare prima di poter procedere all'effettivo invio dei dati.

Infine, occorre specificare che per i campi Lista a discesa, Lista, Scelta Multipla e Scelta Singola è possibile creare l'elenco delle risposte possibili attraverso i seguenti comandi:

§Aggiungi / Rimuovi: aggiungono un nuova modalità di risposta o eliminano la modalità di risposta selezionata.

§Sposta Sopra / Sposta sotto: agiscono sull'ordine di visualizzazione delle possibili risposte, spostando verso l'alto o verso il basso quella selezionata.

§Modifica: modifica la modalità di risposta selezionata. È anche possibile cliccare una seconda volta su una voce già selezionata per poterla modificare.
Clicca per espandere/ridurre Reference: I comandi della sezione Opzioni

Attraverso le opzioni presenti in questa sezione si gestiscono alcune proprietà avanzate dei Campi di un Modulo Invio E-mail.

Nello specifico, le opzioni disponibili sono:

§Descrizione del Campo: permette di comporre un messaggio utile, per esempio, per spiegare al Visitatore cosa viene richiesto nel Campo o come rispondere. Nel caso in cui sia presente, al Campo viene affiancata un'icona (personalizzabile) che indica la disponibilità di maggiori informazioni: passando il mouse su tale icona, il Visitatore potrà visualizzare una Tip con il messaggio predisposto.

§Attributo <name>: specifica il valore da associare all'attributo <name> del Campo nel momento in cui viene generato il codice HTML relativo al Modulo Invio E-mail. Questa opzione è utile, per esempio, quando come metodo di Invio dei dati (vedere: Oggetto Modulo Invio E-mail | Invio) si imposta Invia i dati ad un file.

§Nome Campo Database: specifica il nome da attribuire al Campo perché il dato raccolto possa essere correttamente riconosciuto e inserito all'interno di un database. Questa opzione è utile, per esempio, quando come metodo di Invio dei dati (vedere: Oggetto Modulo Invio E-mail | Invio) si imposta Invia i dati ad un Database.

Best practice:

-

Come lavorare con l'Oggetto Modulo Invio E-mail


ogg_social

Oggetto Social Network

Passo 3 - Creazione della Pagina >

Oggetto Social Network

 Return to chapter overview
Mostra/Nascondi testo nascosto

È probabile che ognuno di noi faccia ormai parte di uno o più Social Network: condividendo messaggi, immagini, video o qualsiasi altro contenuto, costruiamo il nostro profilo online, intessiamo rapporti e allarghiamo costantemente le cerchie dei nostri contatti.

Se, in questo momento, la maggior parte della gente sta interagendo online sui Social Network, è importante riuscire a far dialogare il Sito Web con i profili sui diversi canali sociali aperti. WebSite X5 consente di ottenere questo risultato attraverso l'Oggetto Social Network che sfrutta i Plug-in messi a disposizione da alcuni dei più noti Social Network: Facebook, Google+, Twitter, Pinterest. Ovviamente, i risultati raggiungibili variano in base al plug-in scelto ma, in linea generale, hanno tutti l'obiettivo di trasformare i Visitatori del Sito Web in nuovi contatti sulle reti sociali, stimolando la condivisione dei contenuti proposti.

Clicca per espandere/ridurre Reference: I Social Network disponibili

Innanzitutto occorre selezionare dalla lista Social Network quale elemento inserire. Le voci disponibili sono:

§AddThis - Pulsanti 'Condividi': inserisce una barra di pulsanti e/o un menu che il Visitatore potrà utilizzare per selezionare un Social Network sul quale condividere i contenuti proposti con la sua cerchia di contatti.

Per maggiori informazioni sul funzionamento del Social Plug-in di AddThis, vedere: http://www.addthis.com/social-plugins

§Facebook - Riquadro Commenti: inserisce un riquadro di Facebook attraverso il quale i Visitatori possono lasciare i loro commenti.

§Facebook - Riquadro 'Mi Piace': inserisce un riquadro che permette ai Visitatori di leggere gli ultimi messaggi pubblicati su una Pagina Facebook e di cliccare direttamente sul pulsante "Mi Piace" per seguirla.

§Facebook - Pulsante 'Mi Piace': inserisce il Pulsante "Mi Piace" cliccando sul quale i Visitatori condividono i contenuti che apprezzano con i loro amici su Facebook.

Per maggiori informazioni sul funzionamento dei Social Plug-in di Facebook, vedere: https://developers.facebook.com/docs/plugins/

§Google Plus - Pulsante 'Plus 1': inserisce il pulsante "Segui" cliccando sul quale i Visitatori raccomandano su Google Search i contenuti che apprezzano e li condividono su Google+.

§Google Plus - Badge: inserisce un badge che permette ai Visitatori di scoprire il profilo su Google+ di una persona e, se vogliono, di seguirla.

§Google Plus - Icona: inserisce un pulsante che permette ai Visitatori di scoprire il profilo su Google+ di una persona e, se vogliono, di seguirla.

Per maggiori informazioni sul funzionamento dei Social Plug-in di Google+, vedere: https://developers.google.com/+/plugins/

§Twitter - Pulsante 'Tweet': inserisce il pulsante "Tweet" cliccando sul quale i Visitatori condividono il Sito con quanti li seguono su Twitter.

§Twitter - Riquadro Account: inserisce un riquadro che permette ai Visitatori di leggere gli ultimi tweet (messaggi) pubblicati su un Account Twitter e, se vogliono, di partecipare alla discussione.

§Twitter - Pulsante 'Segui': inserisce il pulsante "Segui" cliccando sul quale i Visitatori incominciano a seguire un Account Twitter.

Per maggiori informazioni sul funzionamento dei Social Plug-in di Twitter, vedere: https://dev.twitter.com/docs/twitter-for-websites

§Pinterest - Pulsante 'Segui': inserisce il pulsante "Segui" cliccando sul quale i Visitatori incominciano a seguire un Account Pinterest.

§Pinterest - Pulsante 'Pin It': inserisce il pulsante "Pin It" cliccando sul quale i Visitatori condividono i contenuti che apprezzano su Pinterest.

Per maggiori informazioni sul funzionamento dei Social Plug-in di Pinterest, vedere: http://pinterest.com/about/goodies/
Clicca per espandere/ridurre Reference: Le impostazioni utilizzabili

Naturalmente, per ogni elemento selezionato dalla lista Social Network sono disponibili delle Impostazioni specifiche, attraverso le quali è possibile definirne aspetto e funzionamento. Al di là delle opzioni puramente grafiche, i parametri a cui occorre prestare particolare attenzione sono i seguenti:

AddThis - Pulsanti 'Condividi'

§Nome Utente: è l'identificativo che si ottiene aprendo un Account su AddThis. Se come Amministratori del Sito si dispone di un Account su AddThis, conviene specificarlo in modo da poter consultare alcune statistiche sull'utilizzo del servizio fatto dai Visitatori.

Facebook - Riquadro Commenti

§URL del Sito: specifica la URL del Sito Web che i Visitatori devono commentare. In genere, il "Riquadro Commenti" è inserito direttamente nella Pagina del Sito che deve essere commentata dai Visitatori: in questi casi la URL da specificare corrisponde con quella della Pagina che contiene il "Riquadro Commenti".

Facebook - Riquadro 'Mi Piace'

§URL Profilo: specifica la URL della Pagina Facebook che si vuole collegare in modo da riprenderne i contenuti e chiedere ai Visitatori di seguirla cliccando sul pulsante "Mi Piace".

Facebook - Pulsante 'Mi Piace'

§URL del Sito: specifica la URL del Sito Web su cui Visitatori possono esprimere il loro apprezzamento cliccando sul pulsante "Mi Piace".

Google Plus - Pulsante 'Plus 1'

§URL del Sito: specifica la URL del Sito Web che i Visitatori possono raccomandare alle loro cerchie.

Google Plus - Badge / Google Plus - Icona

§URL Profilo: specifica la URL del Profilo Google+ che si vuole collegare in modo da consentire ai Visitatori di entrare a far parte delle sue cerchie.

Twitter - Pulsante 'Tweet'

§URL del Sito: specifica la URL del Sito Web che i Visitatori possono postare sul loro Profilo Twitter.

Twitter - Riquadro Account / Twitter - Pulsante 'Segui'

§Nome Utente: è l'identificativo che si ottiene aprendo un Profilo su Twitter.

Pinterest - Pulsante 'Segui'

§Nome Utente: è l'identificativo che si ottiene aprendo un Profilo su Pinterest.

Pinterest - Pulsante 'Pin It'

§URL del Sito: specifica la URL del Sito Web in cui sono pubblicate le immagini che i Visitatori possono "appuntare" sulle loro bacheche di Pinterest.

§URL Immagine: specifica la URL dell'immagine che i Visitatori possono "appuntare" sulle loro bacheche di Pinterest.

Note sulla compatibilità con le versioni precedenti:

Nella precedente versione 9 questo Oggetto era disponibile come Widget dell'Oggetto HTML e Widgets.


ogg_guestbook

Oggetto Guestbook

Passo 3 - Creazione della Pagina >

Oggetto Guestbook

 Return to chapter overview
Mostra/Nascondi testo nascosto

Il Guestbook, letteralmente il "libro degli ospiti", è un'utilità che permette ai Visitatori di un Sito Web di poter lasciare firme e commenti e/o di esprimere un voto. Si compone di un breve Modulo che i Visitatori devono compilare e della lista dei commenti che sono già stati rilasciati da altri.

WebSite X5 consente, non solo, di personalizzare il Guestbook ma anche di gestire l'effettiva pubblicazione dei commenti attraverso un apposito Pannello di Controllo online.

Clicca per espandere/ridurre Reference: Le impostazioni per il Guestbook

Per procedere alla creazione di un Guestbook occorre definire il Tipo di contenuto che i Visitatori del Sito potranno lasciare, scegliendo tra:

Commento e Votazione: i Visitatori potranno lasciare un commento scritto e, in più, esprimere un voto.

Commento: i Visitatori potranno lasciare un commento ma non votare.

Votazione: i Visitatori potranno votare ma senza lasciare alcun commento.

A seconda del Tipo di contenuto selezionato è possibile definire alcune opzioni relative all'Impostazione Commenti:

§Metodo di visualizzazione: definisce se i commenti lasciati dai Visitatori possono essere visualizzati subito online, oppure se devono prima essere approvati attraverso i comandi del Pannello di Controllo online.

§Ordine di visualizzazione: definisce in quale ordine cronologico devono essere visualizzati i commenti pubblicati, se dal più recente al più vecchio o viceversa.

§Mostra pulsante 'Abuso': fa in modo che venga a messo a disposizione dei Visitatori il pulsante "Abuso" attraverso il quale possono segnalare eventuali comportamenti scorretti.

§Attiva controllo anti-spam 'Captcha': aggiunge il controllo anti-spam del Captcha al termine della form per l'inserimento di un commento. In pratica, viene inserita l'immagine di alcune lettere visualizzate in maniera distorta su uno sfondo confuso: il Visitatore deve ricopiare correttamente le lettere in un apposito Campo al fine di poter inviare il commento.

§Stile Votazione: definisce lo stile dell'elemento grafico (per esempio, una serie di 5 stelline) proposto al Visitatore per permettergli di votare. Questa è l'unica opzione disponibile se si seleziona Votazione come Tipo di contenuto.

Per qualsiasi Tipo di contenuto è possibile agire sulle seguenti Proprietà:

§Altezza: imposta il valore in pixel dell'altezza dell'Oggetto Guestbook. Ogni volta che un Visitatore lascia un commento e questo viene pubblicato online, va ad aggiungersi alla lista di quelli già presenti: fissando l'altezza dell'Oggetto si fa in modo che, oltre un certo limite, l'elenco dei commenti possa essere fatto scorrere attraverso una barra di scroll, contenendo la lunghezza complessiva della Pagina.
Clicca per espandere/ridurre Reference: I metodi di invio dei dati del Guestbook

Nelle sezione Salvataggio dei dati è possibile specificare come i dati raccolti attraverso il Modulo da compilare per pubblicare un commento devono essere salvati e inviati al gestore del Sito:

§Sottocartella su Server dove salvare i dati: specifica in quale sottocartella, all'interno della cartella su Server con accesso in scrittura tramite PHP, devono essere salvati i dati. La cartella su Server principale è quella già specificata tramite l'opzione Cartella su Server con accesso in scrittura presente nella finestra Gestione Dati. Se non viene specificata alcuna sottocartella, i dati vengono salvati direttamente nella cartella su Server principale.

§Invia una e-mail di notifica ricezione di un commento: fa in modo che venga inviata automaticamente una e-mail di notifica quando vengono ricevuti nuovi dati.

§E-mail destinatario: specifica l'indirizzo a cui deve essere inviata l'e-mail di notifica di ricezione dei dati.

Normalmente i Provider permettono l'accesso in scrittura per ogni cartella del Server: in questi casi non è necessario specificare alcun percorso per la cartella pubblica. Al contrario, per conoscere il percorso completo della cartella pubblica è necessario contattare il proprio Provider dello spazio Web.

Attraverso la sezione WebSite Test del Pannello di Controllo online è possibile verificare se la cartella con accesso in scrittura specificata, e le eventuali sottocartelle in essa presenti, esistono e, in caso positivo, se permettono effettivamente la scrittura dei dati.

Per il corretto funzionamento dell'Oggetto Guestbook è necessario fare in modo che la Pagina in cui è contenuto sia salvata come file .PHP.

Per impostare l'estensione della Pagina occorre utilizzare l'opzione Estensione del file generato presente nella finestra Proprietà Pagina | Esperto.

Note sulla compatibilità con le versioni precedenti:

Nella precedente versione 9 questo Oggetto era disponibile come Widget dell'Oggetto HTML e Widgets.

Best practice:

-

Come gestire i commenti di Blog e Guestbook dal Pannello di Controllo online

Approfondimenti:

-

Pannello di Controllo online


ogg_mappa

Oggetto Mappa

Passo 3 - Creazione della Pagina >

Oggetto Mappa

 Return to chapter overview
Mostra/Nascondi testo nascosto

Nei Siti Web relativi ad attività commerciali è consueto trovare una Pagina Contatti in cui è presente una mappa interattiva che visualizza l'ubicazione fisica dell'attività stessa. Queste mappe sono molto comode perché non solo comunicano l'indirizzo ma spiegano anche ai potenziali clienti come raggiungere la meta.

WebSite X5 consente di inserire una Mappa, creata sfruttando il servizio di Google Maps™, attraverso l'apposito Oggetto Mappa.

Clicca per espandere/ridurre Reference: Le impostazioni per creare una Mappa interattiva

Innanzi tutto, in Impostazioni, occorre definire il tipo di Stile da utilizzare per la mappa:

Cartina: propone la cartina disegnata con l'indicazione delle vie e dell'indirizzo indicato.

Street View: se disponibile, propone le immagini fotografiche riprese a livello stradale dell'indirizzo indicato.

Street View e Mappa: propone sia la cartina disegnata che le immagini di Google Steet View™, se disponibile per l'indirizzo indicato.

In base al tipo di Stile selezionato, vengono proposte Impostazioni diverse.

Impostazioni: | Cartina | Street View | Street View e Mappa
§Indirizzo: è l'indirizzo che deve essere evidenziato sulla Mappa. | P | P | P
§Angolo: orienta l'angolo di visualizzazione di Google Steet View™. | - | P | P
§Stile: specifica come deve essere visualizzata la Mappa, scegliendo tra Mappa, Satellite e Terreno. | P | - | P
§Fattore zoom: definisce il fattore di ingrandimento con cui visualizzare la cartina. | P | - | P
§Mostra Fumetto: attiva un effetto di mouseover sul segnaposto collocato sulla cartina, in modo da riportare l'indirizzo in forma estesa in una tip (fumetto). | P | - | -
§Mostra il Navigatore: attiva la visualizzazione di un navigatore utile per gestire gli spostamenti in Google Steet View™. | - | P | -

Per qualsiasi tipo di Mappa è anche possibile definire le opzioni presenti nella sezione Generale:

§Lingua: specifica la lingua in cui deve essere visualizzata la Mappa.

§Dimensioni: specifica le dimensioni che deve avere la Mappa. Lasciando attiva l'opzione Mantieni proporzioni, nell'impostazione delle dimensioni viene mantenuta inalterata la proporzione fra la larghezza e l'altezza.

Se nell'anteprima in locale o nel Sito pubblicato online non parte la visualizzazione di Google Steet View™, è possibile che l'Indirizzo indicato sia in una località non ancora coperta dal servizio.

Note sulla compatibilità con le versioni precedenti:

Nella precedente versione 9 questo Oggetto era disponibile come Widget dell'Oggetto HTML e Widgets.


Oggetto Animazione Flash

Passo 3 - Creazione della Pagina >

Oggetto Animazione Flash

 Return to chapter overview
Mostra/Nascondi testo nascosto

WebSite X5 consente di inserire all'interno delle pagine svariati tipi di Animazioni ed effetti in modo da renderle più accattivanti e spettacolari.

Può essere importata qualsiasi animazione Flash (formato .SWF): dal semplice banner con testi e immagini, a filmati più complessi ed interattivi, sia salvati sul PC locale che già pubblicati in Internet. Grazie alle funzioni avanzate disponibili, infatti, è anche possibile allegare eventuali file necessari per la corretta riproduzione dell'Animazione stessa.

I comandi necessari per procedere alla creazione di un Oggetto Animazione Flash sono articolati nelle seguenti sezioni: Base e Esperto.

Clicca per espandere/ridurre Reference: I comandi della Sezione Base

Attraverso i comandi di questa sezione si procede all'importazione del file da utilizzare per la composizione dell'Oggetto Animazione Flash.

L'Animazione Flash può essere inserita importando o un file presente in locale o un file già pubblicato su Internet. Nel primo caso occorre attivare l'opzione File locale su PC, cliccare sul pulsante [image] per sfogliare le risorse disponibili e individuare un file in formato .SWF. Nel secondo caso, invece, è necessario attivare l'opzione File su Internet e digitare nell'apposito campo l'indirizzo al quale la risorsa è già disponibile on-line.

L'anteprima dell'Animazione importata può essere visualizzata all'interno dell'apposita finestra, attivando l'opzione Anteprima.

Per poter visualizzare l'anteprima dell'animazione è necessario installare il Player di Adobe® Flash®, disponibile alla pagina http://get.adobe.com/it/flashplayer/otherversions/ (scegliere l'opzione "Altri Browser").

Per l'Animazione inserita sono disponibili le seguenti Proprietà:

§Testo alternativo: è il testo che viene presentato in alternativa all'Animazione Flash quando questa non può essere visualizzata.

§Dimensioni: specifica le dimensioni in pixel della larghezza e dell'altezza dell'Animazione Flash. Per la larghezza, tra parentesi viene riportato il valore massimo che può essere assunto dall'Oggetto, in base a come è impostata la Griglia di impaginazione. Lasciando attiva l'opzione Mantieni proporzioni, nell'impostazione delle dimensioni viene mantenuta inalterata la proporzione fra la larghezza e l'altezza.

§Versione Player: specifica quale versione del Player Flash richiedere per la visualizzazione dell'Animazione inserita. Se il Visitatore non dispone della versione del Player Flash specificata, viene automaticamente visualizzata una finestra con la richiesta di aggiornamento.

§Sfondo trasparente: se attivata, rende trasparente lo sfondo dell'Animazione inserita.
Clicca per espandere/ridurre Reference: I comandi della Sezione Esperto

Attraverso i comandi di questa sezione si procede all'importazione, se necessario, dei file associati all'Animazione Flash indispensabili perché questa funzioni correttamente.

Tutti i file collegati all'Animazione Flash importati vengono visualizzati in una tabella riassuntiva in cui, oltre al nome del file, viene riportato anche il Percorso relativo su Server.

Per comporre la lista dei file collegati all'Animazione Flash occorre utilizzare i seguenti comandi:

§Aggiungi...: richiama la finestra Pubblica file collegato per inserire un nuovo file collegato all'Animazione Flash.

§Modifica...: richiama la finestra Pubblica file collegato per modificare le impostazioni definite per il file selezionato nella tabella riassuntiva dei File collegati.

§Rimuovi: elimina il file selezionato fra quelli presenti nella tabella riassuntiva dei File collegati.

Infine, è disponibile l'opzione:

§Percorso relativo di pubblicazione del file Flash: specifica il percorso relativo della cartella in cui deve essere pubblicato il file .SWF relativo all'Animazione Flash.


Oggetto Elenco Prodotti

Passo 3 - Creazione della Pagina >

Oggetto Elenco Prodotti

 Return to chapter overview
Mostra/Nascondi testo nascosto

Una delle funzioni più interessanti di WebSite X5 è quella di permettere la creazione e gestione di Siti di E-commerce, attraverso i quali è possibile non solo presentare i propri Prodotti su una vetrina potenzialmente affacciata sul mondo intero, ma anche venderli direttamente on-line.

Oltre a permettere l'inserimento dei Prodotti e la gestione del carrello, WebSite X5 permette di approntare un vero e proprio catalogo online attraverso un apposito Oggetto, chiamato Elenco Prodotti. Questo Oggetto consente di presentare un gruppo di Prodotti, selezionati fra quelli già inseriti nel Carrello e-commerce, attraverso delle Schede Prodotto che ne riassumono le informazioni principali e ne permettono l'acquisto.

I comandi disponibili per creare un Oggetto Elenco Prodotti sono articolati nelle seguenti sezioni: Elenco e Impostazioni.

Clicca per espandere/ridurre Reference: I comandi della Sezione Elenco

Attraverso questa sezione è possibile specificare quali Prodotti devono essere visualizzati nell'Oggetto Elenco Prodotti.

La colonna di sinistra della finestra presenta l'Elenco Categorie e Prodotti inseriti durante la creazione del Carrello e-commerce disponibile al Passo 4 - Impostazioni Avanzate.

Di fianco a ciascuna Categoria e a ciascun Prodotto è presente un check box: è sufficiente cliccare sui check box corrispondenti alle Categorie e/o ai Prodotti che si intendono attivare per fare in modo che vengano inseriti all'interno dell'Oggetto Elenco Prodotti che si sta componendo. Tutti i Prodotti selezionati vengono automaticamente visualizzati all'interno della colonna di destra della finestra.

Attivare una Categoria o attivare tutti i Prodotti appartenenti a una Categoria non è la stessa cosa: solo nel primo caso, infatti, se in un secondo momento verranno aggiunti nuovi Prodotti a una Categoria, questi verranno automaticamente aggiunti negli Oggetti Elenco Prodotti a cui sono collegati.

I Prodotti inseriti nella colonna di destra della finestra possono essere ordinati cliccando sul pulsante Ordinamento e selezionando il tipo di ordinamento che si intende applicare: Personalizzato, Nome, Categoria, Prezzo, Ascendente o Discendente.

Selezionando l'ordinamento Personalizzato è possibile utilizzare i pulsanti Sposta su / Sposta Giù per definire manualmente l'ordine dei Prodotti.

Clicca per espandere/ridurre Reference: I comandi della Sezione Impostazioni

Attraverso le opzioni proposte in questa sezione è possibile definire alcune impostazioni grafiche relative alle Schede attraverso le quali vengono presentati i Prodotti inseriti nell'elenco.

Innanzi tutto occorre specificare il Tipo di visualizzazione scegliendo tra le seguenti tipologie di Schede Prodotto:

Solo Testo

Nella Scheda Prodotto vengono riportate, una di seguito all'altra, le seguenti informazioni: Nome del Prodotto, descrizione, lista a discesa con le varianti (se disponibili), costo e affiancato campo per la quantità con il pulsante "Acquista".

Immagine e Testo

Nella Scheda Prodotto viene visualizzata sulla sinistra l'immagine del Prodotto e sulla destra tutte le informazioni ad esso relative.

Testo e Immagine

Analogo al tipo di presentazione precedente, posiziona il testo sulla sinistra e l'immagine sulla destra.

Solo Immagine

In questo caso, sotto all'immagine vengono riportate tutte le informazioni associate tranne la descrizione estesa.

Alterna Immagine e Testo

In questo caso vengono alternate Schede Prodotto con Immagine e Testo a destra e Schede Prodotto con Immagine e Testo a sinistra.

Tramite le funzioni del riquadro Impostazioni Schede è quindi possibile definire:

§Schede per riga: specifica quante Schede Prodotto devono essere affiancate su un'unica riga.

§Altezza schede: specifica il valore in pixel che deve essere assunto in altezza dalla singole Schede Prodotto. In base a tale parametro, le immagini associate ai Prodotti vengono automaticamente ridimensionate. Se i testi di descrizione dei Prodotti sono troppo lunghi per poter essere visualizzati in maniera completa, viene visualizzata la barra di scorrimento.

§Larghezza Immagine (%): specifica, nel caso in cui sia stato scelto un tipo di presentazione in cui testo e immagine sono affiancati, quanto spazio della Scheda Prodotto deve essere occupato dall'immagine e quanto dal testo. In pratica, se l'immagine occupa il 30% della larghezza della Scheda Prodotto, il restante 70% sarà occupato dal testo.

§Margine interno: il margine è lo spazio tra il bordo della Scheda Prodotto e il suo contenuto. Attraverso questa opzione è possibile, dunque, definire quanto spazio deve esserci attorno al contenuto all'interno della Scheda Prodotto.

Tramite le funzioni del riquadro Grafica è poi possibile definire:

§Colore Testo/Colore Sfondo: definiscono il colore per il testo e lo sfondo delle Schede Prodotto.

§Tipo di Font: specifica il Tipo di carattere, lo Stile e le dimensioni del testo.

Tramite le funzioni del riquadro Opzioni è possibile definire:

§Spessore: specifica lo spessore dei bordi, anche singolarmente.

§Colore: specifica il colore dei bordi, anche singolarmente.

§Smusso: definisce il fattore di smusso per gli angoli, anche singolarmente.

§Ombra: applica un'ombra, definendone il colore, la posizione, la diffusione e la dimensione.

Tramite le funzioni del riquadro Opzioni è possibile definire:

§Mostra Prezzo: visualizza il prezzo associato al Prodotto, con o senza IVA, nella Scheda Prodotto.

§Mostra Campo Quantità: visualizza nella Scheda Prodotto un Campo Quantità per permettere al Cliente di specificare la quantità del Prodotto che intende inserire nel carrello.

§Attiva collegamento su immagine: attiva sulle diverse immagini della Scheda Prodotto il collegamento con le relative immagini ingrandite. Tali immagini ingrandite vengono visualizzate attraverso la finestra ShowBox.

L'aspetto della finestra ShowBox può essere completamente personalizzato: attraverso le opzioni presenti nella sezione Stili e Modelli | E-mail del Passo 4 - Impostazioni Avanzate è, per esempio, possibile impostare colori, ombra, opacità ed effetti di apertura.

Perché l'Oggetto Elenco Prodotti funzioni correttamente, è necessario aver precedentemente inserito dei Prodotti all'interno del Carrello di e-commerce attraverso i comandi della sezione Carrello e-commerce del Passo 4 - Impostazioni Avanzate.

Best practice:

- | Come lavorare con l'Oggetto Elenco Prodotti
- | Come creare un Carrello di e-commerce


Oggetto HTML e Widgets

Passo 3 - Creazione della Pagina >

Oggetto HTML e Widgets

 Return to chapter overview
Mostra/Nascondi testo nascosto

WebSite X5 propone un Oggetto specifico per ogni tipo di contenuto che si può voler inserire all'interno di una Pagina: testo, immagine, animazione, modulo e-mail, ecc. Grazie alla possibilità, poi, di gestire anche l'Oggetto HTML e Widgets, le possibilità diventano virtualmente illimitate. Grazie all'Oggetto HTML e Widgets, infatti, è possibile inserire direttamente porzioni di codice e risolvere così funzioni particolari, anche inizialmente non previste.

Particolarmente utili sono le Widget messe a disposizione: piccole applicazioni già pronte e funzionanti create per risolvere un compito particolare. Un esempio può essere quello della Widget per Google News™: con la definizione di pochi parametri, permette di creare e inserire un box con notizie di attualità aggiornate in tempo reale.

I comandi disponibili per creare un Oggetto HTML e Widgets sono articolati nelle seguenti sezioni: Codice HTML e Esperto.

Clicca per espandere/ridurre Reference: I comandi della Sezione Codice HTML

In questa sezione è disponibile un editor attraverso il quale comporre il codice HTML che si vuole introdurre nella Pagina, digitandolo manualmente o facendo doppio click su una delle Widgets disponibili.

L'editor disponibile nel riquadro Codice HTML mette a disposizione i seguenti comandi:

Taglia [CTRL+X] - Copia [CTRL+C] - Incolla [CTRL+V]

Tagliano, copiano e incollano la porzione di codice selezionato.

Annulla [CTRL+Z] - Ripristina [ALT+MAIUSC+BACKSPACE]

Annullano e ripristinano l'ultima operazione eseguita/annullata.

Per facilitare la scrittura/lettura del codice, nell'editor HTML è stata introdotta l'evidenziazione della sintassi (Syntax highlighting). Questa funzione fa in modo che determinati elementi del codice vengano distinti attraverso l'uso di colori, senza che per questo sia modificato in alcun modo il significato del testo. Grazie all'evidenziazione la struttura del codice diventa chiara e, di conseguenza, è più semplice individuare eventuali errori.

Nel riquadro Elenco Widgets, invece, viene proposta la lista di tutte le Widgets disponibili. Facendo doppio click sulla Widget desiderata viene richiamata la finestra Widget attraverso la quale è possibile definire i parametri previsti. Confermando, il codice HTML relativo alla Widget viene composto e automaticamente inserito nell'editor.

Note sulla compatibilità con le versioni precedenti:

Oggetti disponibili - Mentre nella precedente versione 9 il Guestbook, i pulsanti dei Social Network e la Mappa erano disponibili come Widget, nell'attuale versione 10 sono degli Oggetti veri e propri (vedere, Passo 3 - Creazione della Pagina).

Infine, nel riquadro Proprietà sono disponibili le seguenti opzioni:

§Larghezza: visualizza il valore della larghezza dell'Oggetto HTML e Widgets; tale valore viene automaticamente definito in base allo spazio disponibile nella Griglia di impaginazione.

§Altezza: imposta il valore dell'altezza dell'Oggetto HTML e Widgets.

§Visualizza Barre di Scorrimento: attiva di default, fa in modo che venga automaticamente inserita la barra di scorrimento se l'Oggetto HTML e Widgets ha altezza superiore a quella impostata attraverso l'apposita opzione Altezza.
Clicca per espandere/ridurre Reference: I comandi della Sezione Esperto

Attraverso i comandi di questa sezione si può creare un Foglio di stile (.CSS) e/o definire la lista dei file da allegare all'Oggetto HTML e Widgets a cui si sta lavorando.

Nel riquadro Codice CSS è disponibile un editor (analogo a quello presente nella Sezione Codice HTML) attraverso il quale è possibile digitare le istruzioni per comporre il Foglio di stile. Ricordiamo che lo scopo dei CSS è di definire l'aspetto grafico delle pagine HTML a cui sono collegati.

Nel riquadro File allegati al codice, invece, tutti i file collegati vengono visualizzati attraverso una tabella riassuntiva in cui, oltre al nome del file, viene riportato anche il Percorso relativo su Server.

Per comporre la lista dei file collegati al Codice HTML è possibile utilizzare i seguenti comandi:

§Aggiungi...: inserisce, attraverso la finestra Pubblica file collegato richiamata, un nuovo file collegato.

§Modifica...: richiama la finestra Pubblica file collegato per modificare le impostazioni definite per il file selezionato nella tabella riassuntiva dei File collegati.

§Rimuovi: elimina il file selezionato fra quelli presenti nella tabella riassuntiva dei File collegati.

Approfondimenti:

-

HTML, HTML5 & CSS


Editor Immagine

Passo 3 - Creazione della Pagina > Funzioni comuni >

Editor Immagine

 Return to chapter overview
Mostra/Nascondi testo nascosto

WebSite X5, oltre a procedere automaticamente all'ottimizzazione delle Immagini importate, mette a disposizione un versatile editor grafico interno per poter compiere operazioni di fotoritocco.

L'Editor Immagine può essere richiamato attraverso il pulsante Modifica... disponibile, in genere, nelle finestre in cui è possibile importare un file grafico come, per esempio, quelle relative all'Oggetto Immagine, all'Oggetto Galleria, alla creazione di un nuovo Prodotto nel Carrello e-commerce.

L'Editor Immagine è organizzato nelle seguenti sezioni: Taglio e Rotazione, Filtri, Filigrana, Maschera, Cornice, Effetti e Libreria.

L'Editor Immagine è completato dai seguenti pulsanti:

§OK: chiude l'Editor Immagine e torna alla finestra principale salvando e applicando tutte le modifiche apportate all'immagine.

§Annulla: chiude l'Editor Immagine e torna alla finestra principale annullando le modifiche apportate alle immagine.

§Salva come...: salva una copia dell'immagine originale in formato .PNG.

Clicca per espandere/ridurre Reference: I comandi della Sezione Taglio e Rotazione

Attraverso i comandi di questa sezione si ritaglia l'area dell'immagine che si desidera venga visualizzata, eliminando il resto.

È possibile disegnare l'area del taglio direttamente sull'anteprima dell'immagine e agire sulle ancore per modificarla. La selezione del taglio può essere spostata in modo da mettere in primo piano l'area desiderata: per farlo è sufficiente cliccare su di essa e, tenendo premuto il tasto sinistro del mouse, posizionarla adeguatamente.

Non è necessario confermare il taglio: la porzione esterna alla selezione del taglio (più scura rispetto all'originale) non verrà comunque considerata. Per annullare il taglio, invece, è sufficiente cliccare sull'immagine, al di fuori dell'area selezionata.

A lato dell'immagine sono presenti i seguenti riquadri:

§Taglio: riporta i valori in pixel della Coordinata X e della Coordinata Y che identificano la posizione del vertice superiore sinistro dell'area selezionata con il taglio, oltre che i valori della Larghezza e dell'Altezza da questa assunta. Oltre che essere ripresi direttamente in base all'area di taglio disegnata, i valori dei parametri citati possono anche essere digitati negli appositi campi o impostati attraverso i cursori.

§Riflessione: riflette l'Immagine in senso orizzontale (secondo l'asse verticale) e/o verticale (secondo l'asse orizzontale).

§Rotazione: ruota l'Immagine in senso orario di 0°, 90°, 180° o 270°.
Clicca per espandere/ridurre Reference: I comandi della Sezione Filtri

Attraverso i comandi di questa sezione si correggono le principali regolazioni di colore e si impostano alcuni filtri grafici sull'Immagine importata.

Per impostare un filtro è sufficiente selezionarlo nella lista, attivarlo e definirne le impostazioni. Le modifiche relative ai filtri impostati vengono immediatamente applicate e visualizzate nell'Immagine di anteprima.

§Filtri: riporta l'elenco dei filtri che è possibile applicare all'Immagine. L'elenco comprende: Luminosità e Contrasto, Bilanciamento (RGB), Intensità (HSL), Dettaglio, Sfocato, Bianco e nero, Seppia, Mosaico, Ritratto, Diffusione, Dipinto a olio, Tela, Rumore, Marmo. Per applicare un filtro è sufficiente cliccare in sua corrispondenza in modo da far comparire il segno di spunta sul relativo check box.

§Impostazioni: riporta le impostazioni su cui è possibile agire per definire il filtro selezionato.
Clicca per espandere/ridurre Reference: I comandi della Sezione Filigrana

Attraverso i comandi di questa sezione si applica una filigrana all'Immagine importata in modo da proteggerla dalla copia non autorizzata. Lo scopo della filigrana, infatti, è di alterare l'immagine, per esempio riportando esplicitamente l'indicazione del copyright, in modo da scoraggiarne la copia e l'utilizzo.

§Filigrana: riporta l'elenco delle filigrane fra cui scegliere quella da applicare all'Immagine. Oltre alle immagini di filigrana messe a disposizione, è possibile applicare una filigrana personale: è sufficiente selezionare la seconda anteprima dell'elenco (Personale...) e importare il file grafico appositamente preparato.

§Impostazioni: ruota di 90°, 180° o 270° o riflette orizzontalmente/verticalmente la filigrana applicata all'Immagine.

Una filigrana deve essere preparata come file grafico in formato .GIF, .PNG, .PSD o .WMF per il quale viene impostata la trasparenza: la filigrana viene sovrapposta all'Immagine originale in modo da permettere la visualizzazione solo delle parti corrispondenti alle aree trasparenti.

Dato che il formato .GIF gestisce un unico livello di trasparenza, mentre i formati .PNG e .PSD ne gestiscono fino a 256, è consigliabile salvare le filigrane in uno di questi ultimi formati.

+

=

Clicca per espandere/ridurre Reference: I comandi della Sezione Maschera

Attraverso i comandi di questa sezione si applica una maschera all'Immagine importata in modo da modificarne la forma.

§Maschera: riporta l'elenco delle maschere fra cui scegliere quella da applicare all'Immagine. Oltre alle maschere messe a disposizione, è possibile applicare una maschera personale: è sufficiente selezionare la seconda anteprima dell'elenco (Personale...) e importare il file grafico appositamente preparato.

§Impostazioni: ruota di 90°, 180° o 270° o di riflette orizzontalmente/verticalmente la maschera applicata all'Immagine.

Una maschera non è altro che un'immagine a 256 colori in scala di grigi: la maschera viene applicata sull'Immagine originale in modo che le parti coperte dal nero vengono rese invisibili e quelle coperte dal bianco vengono mantenute visibili.

+

=

Clicca per espandere/ridurre Reference: I comandi della Sezione Cornice

Attraverso i comandi di questa sezione si applicare una cornice all'Immagine importata.

§Cornice: riporta l'elenco delle cornici fra cui scegliere quella da applicare all'Immagine. Oltre alle cornici messe a disposizione, è possibile applicare una cornice personale: è sufficiente selezionare la seconda anteprima dell'elenco (Personale...) e importare il file grafico appositamente preparato.

§Impostazioni: ruota di 90°, 180° o 270° o riflette orizzontalmente/verticalmente la cornice applicata all'Immagine.

Una cornice deve essere preparata come file grafico in formato .GIF, .PNG, .PSD o .WMF per il quale viene impostata la trasparenza: la cornice viene sovrapposta all'Immagine originale in modo da permettere la visualizzazione solo delle parti corrispondenti alle aree trasparenti.

Dal momento che il formato .GIF gestisce un unico livello di trasparenza, mentre i formati .PNG e .PSD ne gestiscono fino a 256 è consigliabile salvare le cornici in uno di questi ultimi formati.

+

=

Clicca per espandere/ridurre Reference: I comandi della Sezione Effetti

Attraverso i comandi di questa sezione si impostano alcuni effetti grafici sull'Immagine importata.

§Effetti: riporta l'elenco degli effetti che è possibile applicare all'Immagine. L'elenco comprende: Ombra, Riflesso, Bagliore Esterno, Bordo Colorato, Sfumato, Bombato, Rilievo, Cornice, Rotazione, Prospettiva, Distorsione e Opacità. Per applicare un effetto è sufficiente cliccare in sua corrispondenza in modo da far comparire il segno di spunta sul relativo check box.

§Impostazioni: riporta le impostazioni su cui è possibile agire per definire l'effetto selezionato.
Clicca per espandere/ridurre Reference: I comandi della Sezione Libreria

In questa sezione si sceglie quale set di impostazioni, salvate come Stile, applicare all'Immagine corrente o, al contrario, si salvano le impostazioni definite per l'Immagine corrente in un nuovo Stile che potrà poi essere ripreso e applicato ad altre Immagini.

§Applica: applica all'Immagine corrente tutte le impostazioni previste per lo Stile selezionato.

§Aggiungi: salva tutte le impostazioni definite nelle sezioni precedenti dell'Editor Immagine per l'Immagine corrente in uno Stile e lo aggiunge alla lista degli Stili Personali.

§Rimuovi: elimina lo Stile selezionato fra quelli presenti nell'elenco Stili Personali. Non è possibile rimuovere gli Stili Predefiniti.

Best practice:

-

Come lavorare con l'Oggetto Immagine


Stile della Cella

Passo 3 - Creazione della Pagina > Funzioni comuni >

Stile della Cella

 Return to chapter overview
Mostra/Nascondi testo nascosto

WebSite X5 permette di procedere alla creazione di ciascuna Pagina di un Sito attraverso una Griglia di impaginazione che suddivide lo spazio disponibile in Celle. Il numero di Celle disponibili dipende dal numero di Righe e Colonne inserite e, per ogni Cella è possibile inserire un diverso contenuto (tramite il semplice Drag & Drop degli Oggetti disponibili).

La Cella equivale, dunque, ad uno spazio determinato della Pagina: ha un suo contenuto e può avere un aspetto grafico del tutto particolare. Agendo su margini, bordi e sfondo della Cella si possono, quindi, creare dei box all'interno della Pagina mediante i quali organizzare i contenuti e dare il giusto risalto a quelli che si desidera mettere in primo piano.

Per definire l'aspetto grafico di una Cella è sufficiente selezionarla e cliccare sul pulsante [image] per richiamare la finestra Stile della Cella, le cui opzioni sono organizzate nelle seguenti sezioni: Stile, Testi e Libreria.

Clicca per espandere/ridurre Reference: I comandi della Sezione Stile

Attraverso i comandi di questa sezione si definiscono le impostazioni grafiche della Cella corrente della Griglia di impaginazione.

Per prima cosa è necessario definire il tipo di Sfondo che si vuole impostare per la Cella, scegliendo tra:

Cella con sfondo colorato: lo sfondo della Cella viene colorato in tinta unita.

Cella con sfondo sfumato: lo sfondo della Cella viene riempito con un gradiente di cui si possono definire i colori di partenza e di fine e la direzione della sfumatura.

Cella con immagine di sfondo: lo sfondo della Cella viene creato attraverso l'importazione di un'immagine.

Cella con immagine adattata: lo sfondo della Cella viene creato attraverso l'importazione di un'immagine che viene tagliata in blocchi e ricomposta in modo da potersi adattare perfettamente alle dimensioni della Cella stessa. (vedere, Come lavorare sull'aspetto della Cella)

A seconda del tipo di Sfondo, è possibile agire su diverse opzioni del riquadro Impostazioni.

 | Cella con sfondo colorato | Cella con sfondo sfumato | Cella con immagine di sfondo | Cella con immagine adattata
§Colore Sfondo: specifica il colore da utilizzare come riempimento dello sfondo. | P | - | P | P
§Colore iniziale / Colore finale: specificano i colori di partenza e di arrivo da utilizzare per comporre una sfumatura. | - | P | - | -
§Diffusione: stabilisce se nella sfumatura deve essere predominante il colore iniziale o il colore finale, definendo lo spazio (in pixel) entro il quale deve avvenire la transizione dal primo al secondo. Per esempio, in una sfumatura verticale in cui si passa dal grigio al bianco con una diffusione a 250, il gradiente viene composto nei primi 250 px, dopodiché lo sfondo rimarrà uniformemente bianco. | - | P | - | -
§Direzione: imposta il tipo di sfumatura che deve essere applicato, scegliendo tra dall'Alto, dal Basso, da Sinistra, da Destra. | - | P | - | -
§File Immagine: seleziona il file grafico (.JPG, .GIF, .PNG.) relativo all'immagine da utilizzare come sfondo. | - | - | P | P
§Disposizione: specifica se l'immagine inserita come sfondo deve essere ripetuta o meno. L'Immagine può essere ripetuta solo in senso orizzontale, solo in senso verticale o in entrambe i sensi, in modo da giungere ad occupare l'intero spazio a disposizione. In più, è possibile fare in modo che l'immagine venga adattata, ovvero ridimensionata in modo da coprire tutto lo sfondo. | - | - | P | -
§Allineamento: specifica come deve essere allineata l'immagine inserita come sfondo rispetto all'area occupata dalla Cella. | - | - | P | -
§Variante colore: specificare il colore su cui si desidera virare l'immagine inserita come sfondo della Cella. In pratica, viene applicato un effetto "colorize" sull'immagine in modo da virarla sul colore desiderato. | - | - | P | -
§Larghezza blocco / Altezza blocco: impostano le dimensioni dei blocchi in cui viene tagliata l'immagine di sfondo in modo da determinare quali porzioni dell'immagine devono essere mantenute inalterate e quali devono essere ripetute. (vedere, Come lavorare sull'aspetto della Cella) | - | - | - | P
§Opacità: imposta il grado di opacità del colore/della sfumatura/dell'immagine di sfondo applicato. Per valori tendenti allo 0 diminuisce l'opacità e lo sfondo della Cella diventa più trasparente lasciando vedere lo sfondo della Pagina. | P | P | P | P

Tramite le opzioni del riquadro Bordo è possibile definire:

§Spessore: specifica lo spessore dei bordi, anche singolarmente.

§Colore: specifica il colore dei bordi, anche singolarmente.

§Smusso: definisce il fattore di smusso per gli angoli, anche singolarmente.

§Ombra: applica un'ombra, definendone il colore, la posizione, la diffusione e la dimensione.

Infine, tramite le opzioni del riquadro Allineamento e Margine è possibile definire:

§Allineamento: allinea in Alto/Centro/Basso e a Sinistra/Centro/Destra l'Oggetto contenuto rispetto alla Cella corrente.

§Margine esterno / Margine interno: impostano il valore in pixel per i margini esterni ed interni della Cella corrente (vedere, Il Box Model in WebSite X5).

Note sulla compatibilità con le versioni precedenti:

Nelle versioni precedenti, le opzioni relative ai Margini della Cella e all'Allineamento del contenuto della Cella erano disponibili attraverso menu richiamati dai pulsanti [image] e [image] presenti nella Barra Strumenti presente sopra la Griglia di impaginazione. Nell'attuale versione 10, tali pulsanti sono stati rimossi e le opzioni sono state incluse nella finestra Stile della Cella| Stile.
Clicca per espandere/ridurre Reference: I comandi della Sezione Testi

Attraverso i comandi di questa sezione si inseriscono e si definisce l'aspetto grafico degli elementi di testo che completano lo stile della Cella corrente della Griglia di impaginazione.

Innanzi tutto occorre selezionare l'elemento, Testo o Immagine, che si vuole inserire e su cui si vuole lavorare. È possibile scegliere tra le seguenti voci:

Titolo: è il testo che viene visualizzato come titolo della Cella corrente.

Immagine intestazione: è un'immagine che può essere inserita nell'intestazione della Cella corrente, eventualmente affiancata al Titolo.

Testo di descrizione: è il testo che viene visualizzato come didascalia della Cella corrente.

Una volta inseriti, i diversi elementi possono essere selezionati o attraverso l'apposito menu a discesa o cliccando direttamente sull'immagine di Anteprima.

A seconda del tipo di elemento selezionato è possibile agire su diverse opzioni del riquadro Impostazioni.

Per gli elementi Titolo e per il Testo di descrizione, le opzioni disponibili sono:

§Contenuto: campo per digitare il Titolo o il Testo di descrizione della Cella.

§Colore Sfondo / Colore Testo: specificano il colore dello sfondo del testo e del testo su cui si sta lavorando.

§Tipo di Font: specifica il Tipo di carattere, lo Stile e le dimensioni del testo.

§Allineamento: allinea il testo a Sinistra, in Centro o a Destra rispetto alla Cella.

§Margine Esterno / Margine Interno: impostano il valore in pixel per i margini del testo, in modo da poterlo posizionare con precisione decidendo quanto deve essere distante dai bordi della Cella.

Per l'elemento Immagine intestazione, invece, le opzioni disponibili sono:

§File Immagine: seleziona il file grafico (.JPG, .GIF, .PNG.) relativo all'immagine da utilizzare come sfondo.

§Allineamento: allinea l'immagine inserita a Sinistra, in Centro o a Destra rispetto alla Cella.

§Margine: imposta il valore in pixel per i margini dell'immagine inserita, in modo da poterla posizionare con precisione rispetto ai bordi della Cella e, di conseguenza, rispetto al Titolo eventualmente presente.
Clicca per espandere/ridurre Reference: I comandi della Sezione Libreria

In questa sezione si sceglie quale set di impostazioni, salvate come Stile, applicare alla Cella corrente o, al contrario, si salvano le impostazioni definite per la Cella corrente in un nuovo Stile che potrà poi essere ripreso e applicato ad altre Celle.

La Libreria presenta un elenco di tutti gli Stili Predefiniti e Personali già creati. In più sono disponibili i seguenti comandi:

§Applica: applica alla Cella corrente tutte le impostazioni previste per lo Stile selezionato.

§Aggiungi: salva tutte le impostazioni grafiche definite nelle Sezioni Stile e Testi per la Cella corrente in uno Stile e lo aggiunge alla lista degli Stili Personali.

§Rimuovi: elimina lo Stile selezionato fra quelli presenti nell'elenco Stili Personali. Non è possibile rimuovere gli Stili Predefiniti.

Nella composizione di uno Stile vengono mantenute tutte le impostazioni grafiche definite per la Cella ma non i contenuti che potrebbero dover variare da una Cella all'altra. In questo modo, per esempio, nello Stile viene salvato il Colore Testo o il Tipo di Font ma non il Contenuto specificato per elementi come il Titolo e il Testo di descrizione associato a una Cella.

Best practice:

-

Come lavorare sullo Stile della Cella

Approfondimenti:

-

Il Box Model in WebSite X5


Collegamento

La finestra Collegamento

Passo 3 - Creazione della Pagina > Funzioni comuni >

La finestra Collegamento

 Return to chapter overview
Mostra/Nascondi testo nascosto

Oltre ai menu di navigazione fissa, creati in automatico in base alla Mappa, WebSite X5 consente di inserire su Testi, Immagini ed altri elementi, i Collegamenti necessari per risolvere una serie di operazioni diverse: aprire Pagine interne o esterne, richiamare file, visualizzare immagini, aggiungere un prodotto al carrello, ecc.

Nell'impostare un Collegamento è possibile, non solo scegliere il tipo di azione, ma anche definire e personalizzare la Tooltip associata in modo da fornire una spiegazione di ciò che accadrà in conseguenza al click.

Le opzioni disponibili per impostare un collegamento sono presentate nelle seguenti sezioni: Azione e Descrizione.

Clicca per espandere/ridurre Reference: I comandi della sezione Azione

Attraverso i comandi di questa sezione si specifica il tipo di azione da associare al Collegamento:

Pagina del Sito

Imposta un Collegamento con un'altra Pagina del Sito. Cliccando sul pulsante [image] si sfoglia la Mappa del Sito per selezionare la Pagina del Sito da collegare. Se necessario, è possibile specificare anche l'Ancora interna alla Pagina a cui puntare, selezionandola dall'elenco delle Ancore presenti nella Pagina. Infine, è possibile specificare se la Pagina collegata deve essere visualizzata nella stessa finestra, in una nuova finestra del Browser o in una finestra di PopUp. In questo ultimo caso, come PopUp viene aperta una nuova finestra del Browser di cui di si possono impostare le dimensioni (Larghezza e Altezza).

Le Ancore devono essere state preventivamente associate agli Oggetti per poter comparire nell'elenco proposto dall'opzione Ancora interna alla Pagina.

Per associare un'Ancora a un Oggetto occorre utilizzare il pulsante [image] disponibile al Passo 3 - Creazione della Pagina.

File o URL

Imposta un Collegamento con una qualsiasi risorsa, file o pagina HTML, presente sul computer sul quale si sta lavorando o già pubblicato sul Web. Per specificare quale file collegare è sufficiente attivare l'opzione File locale su PC e cliccare sul pulsante [image] per sfogliare le risorse salvate sul sistema, oppure attivare l'opzione File su Internet e digitare l'indirizzo (URL) che ne identifica la posizione in rete.

Anche in questo caso, è possibile specificare se la risorsa collegata deve essere visualizzata nella stessa finestra, in una nuova finestra del Browser o in una finestra di PopUp di cui di si possono impostare le dimensioni (Larghezza e Altezza).

File o URL con ShowBox

Imposta un Collegamento per visualizzare un qualsiasi file, presente sul computer o già pubblicato su Web, in una apposita finestra ShowBox. A differenza di quanto accade per la finestra di PopUp, con la finestra ShowBox il file richiamato viene visualizzato in primo piano sullo sfondo della Pagina originale, resa automaticamente più opaca e chiara/scura.

Per specificare quale file collegare è sufficiente attivare l'opzione File locale su PC e cliccare sul pulsante [image] per sfogliare le risorse salvate sul sistema, oppure attivare l'opzione File su Internet e digitare l'indirizzo (URL) che ne identifica la posizione in rete. Tramite le opzioni disponibili, è possibile impostare le dimensioni (Larghezza e Altezza) della finestra ShowBox oltre che una Didascalia che verrà visualizzata in calce.

Il collegamento con finestra ShowBox è particolarmente indicato per la visualizzazione di immagini, ma può essere utilizzato anche per la visualizzazione di risorse diverse come, per esempio, i documenti .PDF.

Galleria con ShowBox

Imposta un Collegamento per avviare la visualizzazione di una Galleria di immagini all'interno di una finestra ShowBox. Per creare l'elenco delle immagini è sufficiente utilizzare i comandi disponibili: Aggiungi..., Rimuovi, Sposta Sopra e Sposta Sotto. In più, è possibile impostare le dimensioni (Larghezza massima e Altezza massima) delle finestra ShowBox.

L'aspetto della finestra ShowBox può essere completamente personalizzato: attraverso le opzioni presenti nella sezione Stili e Modelli | E-mail del Passo 4 - Impostazioni Avanzate è, per esempio, possibile impostare colori, ombra, opacità ed effetti di apertura.

Posta elettronica

Imposta un Collegamento per aprire il programma di posta elettronica predefinito e inviare una e-mail. Per definire questo tipo di collegamento è sufficiente digitare l'indirizzo e-mail e, opzionalmente, l'oggetto e il contenuto del messaggio.

Attivando l'opzione Attiva protezione indirizzo e-mail, l'indirizzo e-mail specificato viene riportato in forma criptata all'interno del codice HTML della Pagina: in questo modo non verrà riconosciuto dai robot che scandagliano la rete alla ricerca di indirizzi per operazioni di spam.

Chiamata Internet

Imposta un Collegamento per aprire il programma associato alle chiamate via Internet (per esempio, Skype) e dialogare con l'Utente specificato attraverso l'apposito campo. In più, è possibile specificare il Tipo di azione scegliendo tra: Avvia chiamata, Aggiungi contatto, Avvia chat, Visualizza profilo, Avvia Skype VoiceMail e Invia file.

Suono

Imposta un Collegamento per avviare la riproduzione di un suono. Per specificare quale file collegare è sufficiente attivare l'opzione File locale su PC e cliccare sul pulsante [image] per sfogliare le risorse salvate sul sistema, oppure attivare l'opzione File su Internet e digitare l'indirizzo (URL) che ne identifica la posizione in rete. È possibile collegare file in formato .MP3.

Cliccando sul link viene visualizzata una Tooltip contente il pulsante Play/Pause per avviare/interrompere la riproduzione del suono. Facendo uscire il mouse dalla Tooltip, questa si chiude e la riproduzione del suono viene interrotta.

La Tooltip sul link con il suono viene creata automaticamente dal Programma: l'aspetto viene definito in base alla impostazioni attivate nella finestra Stili e Modelli | Testi del Passo 4 - Impostazioni Avanzate.

Stampa Pagina

Imposta un Collegamento per avviare la stampa della Pagina visualizzata.

Messaggio di Avviso

Imposta un Collegamento per visualizzare un messaggio di avviso. Per definire questo tipo di collegamento è sufficiente digitare il Testo del messaggio nell'apposito campo. Attivando l'opzione Visualizza come finestra di popup, il messaggio di avviso viene visualizzato in una finestra di dialogo stile Windows.

Feed RSS

Visualizza il Feed RSS del Sito: il collegamento è attivo solo se è stato effettivamente creato un Feed RSS attraverso l'apposita finestra del Passo 4 - Impostazioni Avanzate.

Quando si testa il funzionamento del Sito creato in locale, una finestra d'avviso avverte che i Feed RSS saranno visualizzati solo una volta che il Sito sarà pubblicato online.

Blog

Impostare un Collegamento per aprire il Blog collegato al Sito corrente. Perché questo collegamento funzioni correttamente, è necessario aver precedentemente creato un Blog attraverso l'apposita sezione del Passo 4 - Impostazioni Avanzate.

Attraverso le opzioni disponibili è possibile specificare se il Blog collegato deve essere visualizzata nella stessa finestra o in una nuova finestra del Browser.

Mappa del Sito

Imposta un Collegamento per visualizzare la Mappa del Sito completa in un'apposita Pagina. Le voci della Mappa del Sito, creata in automatico, sono Collegamenti attivi alle singole Pagine: la Mappa rappresenta, pertanto, un utile strumento di orientamento e di navigazione messo a disposizione del Visitatore. La visualizzazione delle voci della Mappa può essere gestita attraverso i comandi Espandi tutto e Contrai tutto.

Mostra il Carrello

Imposta un Collegamento per visualizzare la Pagina del Carrello con l'elenco di tutti i Prodotti già ordinati.

Aggiungi al Carrello

Imposta un Collegamento per consentire al Visitatore di accedere al Carrello di e-commerce per procedere all'ordine o di inserire direttamente un Prodotto specificato fra quelli da acquistare.

Nel primo caso occorre attivare l'opzione Visualizza l'elenco dei Prodotti della Categoria selezionata e selezionare la Categoria desiderata attraverso lo schema che ripropone tutto il catalogo dei Prodotti.

Nel secondo caso, invece, occorre attivare l'opzione Aggiungi direttamente nel Carrello il Prodotto selezionato e selezionare il Prodotto sempre attraverso l'apposita lista. In più, è anche possibile specificare la Variante e la Quantità del Prodotto che verrà inserita nel Carrello.

Perché i collegamenti Mostra il Carrello e Aggiungi al Carrello funzionino correttamente, è necessario aver precedentemente creato il Carrello di e-commerce attraverso i comandi della sezione Carrello e-commerce del Passo 4 - Impostazioni Avanzate.
Clicca per espandere/ridurre Reference: I comandi della sezione Descrizione

Attraverso i comandi di questa sezione si associa una descrizione al Collegamento. Questa descrizione viene utilizzata per comporre una nota esplicativa, detta "Tooltip" o "Tip". La Tooltip viene visualizzata di fianco al puntatore del mouse quando questo viene posizionato in corrispondenza del Collegamento stesso e dovrebbe servire per spiegare cosa accadrà cliccando: si passerà a una Pagina o a un Sito diverso, si visualizzerà un'immagine, si avvierà il download di un file, ecc.

I comandi disponibili per la composizione della Tooltip sono:

§Testo: specifica la descrizione del Collegamento.

§Immagine: specifica l'immagine che verrà visualizzata nella Tooltip insieme o al posto della descrizione del Collegamento.

§Larghezza: imposta la larghezza in pixel della Tooltip.

§Larghezza Immagine (%): imposta la larghezza dell'immagine in percentuale rispetto alla larghezza della Tooltip.

§Posizione Immagine: definisce la posizione dell'immagine inserita nella Tooltip rispetto al testo.

Testo, Immagine e Larghezza sono parametri che variano per ciascun Collegamento e, quindi, devono essere impostati di volta in volta. Altre impostazioni grafiche, relative all'aspetto della Tooltip e quindi comuni per tutto il Progetto, possono essere definite nella finestra Stili e Modelli | Testi del Passo 4 - Impostazioni Avanzate.

Best practice:

-

Come creare e utilizzare le Ancore

Approfondimenti:

-

Navigazione


Finestra Proprietà Effetto

Passo 3 - Creazione della Pagina > Funzioni comuni >

Finestra Proprietà Effetto

 Return to chapter overview
Mostra/Nascondi testo nascosto

Questa finestra presenta i comandi necessari per impostare un effetto di entrata sulle Immagini selezionate dell'Oggetto SlideShow, disponibile nell'editor per la Modifica del Modello, sulle Immagini selezionate dell'Oggetto Galleria e sulle immagini dello SlideShow creato per presentare un Prodotto (vedere, Oggetto Elenco Prodotti).

I comandi disponibili sono articolati nelle seguenti sezioni: Tipo di Effetto, Zoom e Posizione e Pagina.

Clicca per espandere/ridurre Reference: I comandi della Sezione Tipo di Effetto

Attraverso i comandi di questa sezione si sceglie il tipo di effetto in entrata da applicare alle Immagini su cui si sta lavorando:

§Elenco Effetti: presenta la lista di tutti gli effetti disponibili. Selezionando la voce "1 - Casuale" l'effetto da applicare viene scelto automaticamente in maniera casuale. Una volta selezionato, di ciascun effetto viene visualizzata un'anteprima attraverso l'apposita finestra.

§Tempo di visualizzazione: imposta il tempo (in secondi) per la visualizzazione dell'immagine.
Clicca per espandere/ridurre Reference: I comandi della Sezione Zoom e Posizione

Attraverso i comandi di questa sezione si definisce il tipo di movimento e di ingrandimento da applicare alle Immagini su cui si sta lavorando.

§Posizione iniziale: imposta il fattore di ingrandimento e le Coordinate X e Y che definiscono la posizione iniziale da cui parte il movimento dell'Immagine.

§Posizione finale: imposta il fattore di ingrandimento e le Coordinate X e Y che definiscono la posizione finale in cui termina il movimento dell'Immagine.

In entrambe i casi, è possibile agire direttamente sull'Immagine di anteprima per trascinarla nella posizione desiderata e definire così le posizioni iniziale e finale del movimento.

Su una stessa Immagine è possibile impostare sia un effetto in entrata che un effetto che prevede il movimento e lo zoom. In questo caso, viene prima applicato l'effetto in entrata e l'Immagine viene visualizzata secondo le coordinate e le dimensioni definite per la posizione iniziale. Di conseguenza, viene riprodotto lo spostamento, ed eventualmente il ridimensionamento, che porta l'Immagine a raggiungere le coordinate e le dimensioni definite per la posizione finale.
Clicca per espandere/ridurre Reference: I comandi della Sezione Pagina

Questa sezione è attiva solo nel caso di Immagini appartenenti a un Oggetto SlideShow inserito nell'Intestazione/Piè di pagina del Modello grafico (vedere, Modifica del Modello).

Ripropone la Mappa del Sito: apponendo il segno di spunta accanto alle Pagine, si selezionano quelle in cui l'Immagine dello SlideShow su cui si sta lavorando deve essere visualizzata. In questo modo parti dello stesso Oggetto SlideShow presenti nell'Intestazione/Piè di pagina del Modello possono essere visualizzate in sezioni diverse del Sito.

Specificare in quali Pagine di un Sito devono essere visualizzate determinate immagini di uno SlideShow può essere particolarmente utile nel caso, per esempio, di messaggi pubblicitari. Attraverso lo SlideShow si impostano tutti i banner da usare nel Sito e poi si fa in modo che per ciascuna Pagina o sezione vengano visualizzati solo i messaggi pertinenti.


Finetsra Pubblica file collegato

Finestra Pubblica file collegato

Passo 3 - Creazione della Pagina > Funzioni comuni >

Finestra Pubblica file collegato

 Return to chapter overview

Questa finestra viene richiamata dal pulsante Aggiungi... relativo alla composizione delle lista dei file collegati o a un'Animazione Flash (vedere, Oggetto Animazione Flash | Esperto) o a un Codice HTML (vedere, Oggetto HTML e Widgets | Esperto).

I comandi disponibili sono:

§File collegato da pubblicare sul Server: seleziona un file da importare perché collegato all'Oggetto su cui si sta lavorando.

§Percorso relativo sul Server: specifica il percorso relativo della cartella in cui il file importato, perché collegato all'Oggetto, deve essere pubblicato.

§Collega il file alla Pagina (solo per file .js e .css): se il file importato è un file JavaScript (formato .JS) o un Foglio di Stile (formato .CSS), per poter funzionare deve essere collegato alla Pagina da codice. In questi casi, attivando questa opzione, il codice necessario viene automaticamente inserito nella sezione <HEAD> del codice HTML della Pagina.


Impostazioni Avanzate

Passo 4 - Impostazioni Avanzate >

Impostazioni Avanzate

 Return to chapter overview

Dopo aver disegnato la Mappa del Sito al Passo 2 e creato le singole Pagine inserendo tutti i contenuti necessari al Passo 3, è possibile procedere al Passo 4 dove vengono proposte una serie di sezioni contenenti numerose funzioni avanzate. È così possibile procedere alla definizione dello Stile dei diversi Menu di navigazione e dei testi ma anche alla creazione di sezioni di Sito importanti come il Carrello di e-commerce, il Blog o l'Area Riservata.

Nello specifico, le funzioni avanzate disponibili sono:

Menu Principale

Definisce l'aspetto grafico delle voci del Menu di primo livello, ovvero del Menu sempre visibile nella parte superiore (struttura con Menu orizzontale) o laterale (struttura con Menu verticale) del Sito che risolve la navigazione fissa.

Menu a Comparsa

Definisce l'aspetto grafico delle voci del Menu a Comparsa, ovvero il Menu che viene visualizzato passando con il mouse su una voce del Menu Principale.

Menu di Pagina

Definisce l'aspetto grafico del Menu di Pagina, ovvero del Menu che propone l'elenco delle Pagine del Livello corrente.

Stili e Modelli

Definiscono gli stili da applicare ai diversi elementi di testo presenti nelle Pagine, alla finestra ShowBox legata all'Oggetto Galleria, alle Tooltip che possono essere associate al Collegamento e alle e-mail generate se si utilizza l'Oggetto Modulo Invio E-mail o se si crea un Carrello e-commerce.

Pagina di Benvenuto

Imposta una Pagina di Benvenuto che fa da introduzione al Sito, prevedendo una colonna sonora e i collegamenti necessari per la scelta della lingua di consultazione.

Messaggio Pubblicitario

Imposta e personalizza un messaggio pubblicitario che verrà visualizzato nella sola Home Page o in tutte le pagine del Sito, nella posizione specificata.

Blog

Crea e gestisce un Blog, una sorta di diario su Web in cui pubblicare notizie che gli utenti potranno commentare.

Feed RSS

Crea e gestisce un Feed RSS, utile come canale di informazioni costantemente aggiornate.

Gestione Dati

Imposta i metodi di gestione dei dati raccolti attraverso elementi del Sito Web come i Moduli di Invio E-mail, il Blog, il Guestbook o il Carrello e-commerce.

Gestione Accessi

Crea i profili Utente che potranno accedere alla Pagine Protette del Sito e li gestisce in Gruppi. Le Pagine Protette, definite al Passo 2, durate la Creazione della Mappa, vanno a comporre un'Area Riservata a cui gli Utenti potranno accedere solo attraverso il login: le credenziali d'accesso utilizzate determinano quali Pagine Protette potranno essere effettivamente visualizzate.

Carrello e-commerce

Crea e gestisce un carrello di e-commerce, definendo aspetti come: l'elenco dei Prodotti, i metodi di Spedizione e Pagamento, la composizione del modulo da compilare per l'invio dell'ordine.

Per maggiori informazioni sulla creazione della Mappa e la distinzione fra voci di primo e secondo livello, menu a comparsa e sotto menu, fare riferimento a quanto spiegato in Creazione della Mappa.


Stile del Menu Principale

Passo 4 - Impostazioni Avanzate >

Stile del Menu Principale

 Return to chapter overview
Mostra/Nascondi testo nascosto

Questa finestra presenta i comandi per procedere alla definizione di alcune impostazioni avanzate sullo stile grafico dei Pulsanti relativi alle voci di primo livello del Menu.

I Menu vengono creati e aggiornati in automatico dal Programma in base alla Mappa del Sito disegnata al Passo 2 - Creazione della Mappa. Il Menu Principale è quello che presenta le voci di primo Livello della Mappa che vanno a comporre la navigazione fissa del Sito. Nei Siti con struttura con Menu Orizzontale, il Menu Principale è sempre visibile, posizionato immediatamente sopra o sotto l'Intestazione. Nei Siti con struttura con Menu Verticale, invece, il Menu Principale è sempre visibile, posizionato in un'apposita colonna a sinistra o a destra del contenuto della Pagina.

I comandi necessari per procedere alla personalizzazione dei Pulsanti sono organizzati nelle seguenti sezioni: Generale, Voci Menu e Stile 3D.

Clicca per espandere/ridurre Reference: I comandi della sezione Generale

Attraverso i comandi di questa sezione si definiscono alcune impostazioni generali del Menu Principale.

Le opzioni disponibili nel riquadro Stile sono:

§Larghezza: imposta il valore in pixel della larghezza dei Pulsanti contenenti le voci di Menu.

§Margine: imposta il valore in pixel del margine orizzontale e del margine verticale, ovvero dello spazio presente tra il bordo del Pulsante e il testo contenuto.

§Distanza tra i Pulsanti: imposta il valore in pixel del margine esterno, ovvero dello spazio presente tra un Pulsante e l'altro.

§Scorrimento automatico del Menu: fa in modo che il Menu di navigazione scorra automaticamente insieme al Contenuto della Pagina, così da rimanere sempre visibile e disponibile.

La larghezza dei Pulsanti deve essere definita anche in considerazione dello spazio complessivamente disponibile per il Menu: tale parametro può essere liberamente modificato nel caso non si utilizzi un Modello grafico predefinito (vedere, Modello Personalizzato).

Le opzioni presenti nel riquadro Testo sono:

§Tipo di Font: specifica il Tipo di carattere, lo Stile e le dimensioni del testo.

§Allineamento: definisce l'allineamento del testo a Sinistra, al Centro o a Destra rispetto al Pulsante.

§Usa antialias per visualizzare il testo: applica un effetto di antialiasing sul testo, in modo da rendere i contorni delle scritte meno frastagliati.
Clicca per espandere/ridurre Reference: I comandi della sezione Voci Menu

Attraverso i comandi di questa sezione si definiscono i colori, le immagini di sfondo e lo stile dei testi per i diversi stati dei Pulsanti del Menu Principale.

Per prima cosa, occorre selezionare l'Elemento del Menu su cui si vuole lavorare: è possibile definire l'aspetto della [image] Voce del Menu e della [image] Voce su passaggio del mouse/Pagina corrente. Per selezionare l'Elemento del Menu è possibile utilizzare o l'apposito menu a tendina o agire direttamente sull'immagine di Anteprima che viene costantemente aggiornata in base alle modifiche apportate.

Per tutti gli Elementi del Menu è possibile agire sulle seguenti opzioni del riquadro Stile:

§Colore Sfondo / Colore Testo / Colore Bordo: definiscono il colore per lo sfondo, per il testo e per il bordo del Pulsante.

§Immagine di Sfondo: definisce l'Immagine che deve essere visualizzata come sfondo del Pulsante. Per selezionare l'Immagine da utilizzare è sufficiente cliccare sul pulsante [image] per sfogliare le risorse disponibili: possono essere utilizzati file in formato .JPG, .GIF, .PNG. In alternativa è possibile cliccare sulla freccia a lato del campo per aprire la libreria dei pulsanti e selezionare l'Immagine da utilizzare.

§Stile Font: per l'Elemento Voce del Menu, definisce lo stile del testo del Pulsante scegliendo tra Nessuno, Bassorilievo, Altorilievo e Ombra. L'Elemento Voce su passaggio del mouse/Pagina corrente eredita automaticamente l'impostazione definita per l'Elemento Voce del Menu: in più, è possibile aggiungere uno dei seguenti stili: Normale, Grassetto, Corsivo e Grassetto Corsivo.
Clicca per espandere/ridurre Reference: I comandi della sezione Stile 3D

Attraverso i comandi di questa sezione si definiscono forma e aspetto 3D dei Pulsanti.

Attraverso le opzioni disponibili nel riquadro Forma è possibile definire:

§Forma: definisce la forma del Pulsante, scegliendola fra quelle proposte.

§Fattore Smusso: imposta il fattore di smusso su forme di Pulsante che prevedono gli angoli arrotondati o, comunque, diversi da quelli di un rettangolo.

§Unisci forma Pulsanti: unisce fra loro i Pulsanti in modo tale che la forma scelta venga applicata al blocco dei Pulsanti considerati nel loro insieme.

Nel riquadro Aspetto 3D sono disponibili le opzioni:

§Aspetto: definisce l'aspetto del Pulsante come Bombato, Piatto, Bombato piatto, Incavato, ecc.

§Direzione Luce: definisce la direzione dell'effetto luce impostato sul Pulsante.

§Fattore Sfumatura: imposta il fattore di sfumatura da applicare sul Pulsante.

§Trasparenza Immagine: imposta il fattore di trasparenza per le Immagini inserite sui Pulsanti del Menu attraverso le apposite opzioni della sezione Voci Menu.

Infine, il riquadro Bordo 3D presenta le seguenti opzioni:

§Stile Bordo: definisce lo stile del bordo del Pulsante come Normale, Bombato, Incavato.

§Spessore esterno / Spessore interno: impostano lo spessore esterno ed interno del bordo del Pulsante.

§Bordo esterno unico: il bordo viene disegnato, in base alle impostazioni definite, non per ogni singolo Pulsante ma per tutto il blocco dei Pulsanti considerati nel loro insieme.

Approfondimenti:

-

La struttura di navigazione di un Sito


Stile del Menu a Comparsa

Passo 4 - Impostazioni Avanzate >

Stile del Menu a Comparsa

 Return to chapter overview
Mostra/Nascondi testo nascosto

Questa finestra presenta i comandi per procedere alla definizione di alcune impostazioni avanzate relative allo stile grafico dei Menu a Comparsa.

I Menu vengono creati e aggiornati in automatico dal Programma in base alla Mappa del Sito disegnata al Passo 2 - Creazione della Mappa. I Menu a Comparsa sono quelli che vengono visualizzati al passaggio del mouse su una voce di Livello del Menu Principale.

I comandi necessari per procedere alla personalizzazione dei Pulsanti sono organizzati nelle seguenti sezioni: Generale, Voci Menu e Stile 3D.

Clicca per espandere/ridurre Reference: I comandi della sezione Generale

Attraverso i comandi di questa sezione si definiscono alcune impostazioni generali del Menu a Comparsa.

Innanzi tutto occorre definire il Tipo di Menu che si vuole realizzare scegliendo tra:

Disposizione su una colonna: tutte le voci del Menu a Comparsa vengono organizzate in un'unica colonna, una di seguito all'altra.

Disposizione su più colonne: le voci del Menu a Comparsa vengono organizzate in più colonne affiancate. Viene automaticamente creata una nuova colonna quando:

§il numero di voci raggiunge o supera il valore impostato per l'opzione Max Voci per Colonna;

§l'elenco delle Pagine è interrotto da un Separatore (vedere, Creazione della Mappa).

In più, se nella finestra Scelta del Modello o nella finestra Modello Personalizzato è stato impostato il Menu Verticale, è disponibile anche:

Apertura a fisarmonica: tutte le voci del Menu a Comparsa vengono organizzate in un'unica colonna; cliccando su una voce, tutte le voci successive si muovono verso il basso in modo da lasciare spazio per la visualizzazione delle sotto-voci correlate.

Scelto il Tipo di Menu, è possibile definire le opzioni proposte nel riquadro Stile:

§Larghezza: imposta il valore in pixel della larghezza dei Pulsanti contenenti le voci di Menu.

§Margine: imposta il valore in pixel del margine orizzontale e del margine verticale, ovvero dello spazio presente tra il bordo del Pulsante e il testo contenuto.

§Max Voci per Colonna: attivo solo per il Tipo di Menu Disposizione su più colonne, imposta il numero massimo di voci che possono essere contenute in ciascuna colonna del Menu a Comparsa.

Le opzioni presenti nel riquadro Testo sono:

§Tipo di Font: specifica il Tipo di carattere, lo Stile e le dimensioni del testo.

§Allineamento: definisce l'allineamento del testo a Sinistra, al Centro o a Destra rispetto al Pulsante.

Infine, il riquadro Opzioni propone:

§Effetto: definisce l'effetto di visualizzazione per il Menu a Comparsa, scegliendo tra Nessuno, Dissolvenza, Scorrimento dall'alto, Scorrimento da sinistra, Scorrimento dall'alto sinistra.

§Preseleziona la pagina corrente: attivo solo per il Tipo di Menu Apertura a fisarmonica, fa in modo che, in base alla Pagina del Sito aperta, il Menu venga automaticamente espanso in modo da poter visualizzare come selezionata la voce corrispondente.
Clicca per espandere/ridurre Reference: I comandi della sezione Voci Menu

Attraverso i comandi di questa sezione si definiscono i colori, le immagini di sfondo e lo stile dei testi per i diversi stati dei Pulsanti del Menu a Comparsa.

Per prima cosa, occorre selezionare l'Elemento del Menu su cui si vuole lavorare: è possibile definire l'aspetto della [image] Voce del Menu, della [image] Voce su passaggio del mouse e del [image] Separatore. Per selezionare l'Elemento del Menu è possibile utilizzare o l'apposito menu a tendina o agire direttamente sull'immagine di Anteprima che viene costantemente aggiornata in base alle modifiche apportate.

Per tutti gli Elementi del Menu è possibile agire sulle seguenti opzioni del riquadro Stile:

§Colore Sfondo / Colore Testo / Colore Bordo: definiscono il colore per lo sfondo, per il testo e per il bordo del Pulsante. Per l'elemento Separatore è disponibile solo il comando Colore Testo.

§Stile Font: per gli Elementi Voce su passaggio del mouse e Separatore, definisce lo stile del testo scegliendo tra Normale, Grassetto, Corsivo e Grassetto Corsivo.

§Immagine di Sfondo: disponibile solo per gli Elementi Voce del Menu e Voce su passaggio del mouse, definisce l'Immagine che deve essere visualizzata come sfondo del Pulsante. Per selezionare l'Immagine da utilizzare è sufficiente cliccare sul pulsante [image] per sfogliare le risorse disponibili: possono essere utilizzati file in formato .JPG, .GIF, .PNG. In alternativa è possibile cliccare sulla freccia a lato del campo per aprire la libreria dei pulsanti e selezionare l'Immagine da utilizzare.

§Icona punto elenco: definisce l'immagine che deve essere utilizzata come punto elenco a fianco delle voci dei Pulsanti o dei Separatori inseriti. Anche in questo caso occorre cliccare sul pulsante [image] e selezionare un file in formato .JPG, .GIF, .PNG.
Clicca per espandere/ridurre Reference: I comandi della sezione Stile 3D

Attraverso i comandi di questa sezione si definiscono forma e aspetto 3D dei Pulsanti.

Attraverso le opzioni disponibili nel riquadro Forma è possibile definire:

§Forma: definisce la forma del Pulsante, scegliendola fra quelle proposte.

§Fattore Smusso: imposta il fattore di smusso su forme di Pulsante che prevedono gli angoli arrotondati o, comunque, diversi da quelli di un rettangolo.

§Unisci forma Pulsanti: unisce fra loro i Pulsanti in modo tale che la forma scelta venga applicata al blocco dei Pulsanti considerati nel loro insieme.

Nel riquadro Aspetto 3D sono disponibili le opzioni:

§Aspetto: definisce l'aspetto del Pulsante come Bombato, Piatto, Bombato piatto, Incavato, ecc.

§Direzione Luce: definisce la direzione dell'effetto luce impostato sul Pulsante.

§Fattore Sfumatura: imposta il fattore di sfumatura da applicare sul Pulsante.

§Trasparenza Immagine: imposta il fattore di trasparenza per le Immagini inserite sui Pulsanti del Menu attraverso le apposite opzioni della sezione Voci Menu.

Infine, il riquadro Bordo 3D presenta le seguenti opzioni:

§Stile Bordo: definisce lo stile del bordo del Pulsante come Normale, Bombato, Incavato.

§Spessore esterno / Spessore interno: impostano lo spessore esterno ed interno del bordo del Pulsante.

§Bordo esterno unico: il bordo viene disegnato, in base alle impostazioni definite, non per ogni singolo Pulsante ma per tutto il blocco dei Pulsanti considerati nel loro insieme.

Approfondimenti:

-

La struttura di navigazione di un Sito


Stile del Menu di Pagina

Passo 4 - Impostazioni Avanzate >

Stile del Menu di Pagina

 Return to chapter overview
Mostra/Nascondi testo nascosto

Questa finestra presenta i comandi per procedere alla definizione di alcune impostazioni avanzate relative allo stile grafico dei Pulsanti dei Menu di Pagina.

I Menu vengono creati e aggiornati in automatico dal Programma in base alla Mappa del Sito disegnata al Passo 2 - Creazione della Mappa. I Menu di Pagina sono quelli che, opzionalmente, possono essere visualizzati per proporre l'elenco delle Pagine del Livello corrente. In altre parole, se si apre una Pagina che appartiene a un Livello e questo Livello contiene anche altre Pagine, il Menu di Pagina propone l'elenco di tutte le Pagine di tale Livello. I Menu di Pagina vengono sempre proposti come menu verticali, posizionati a destra o a sinistra dei contenuti di Pagina.

I comandi necessari per procedere alla personalizzazione dei Pulsanti sono organizzati nelle seguenti sezioni: Generale e Voci Menu.

Clicca per espandere/ridurre Reference: I comandi della sezione Generale

Attraverso i comandi di questa sezione si definiscono alcune impostazioni generali del Menu di Pagina.

Innanzi tutto, se si desidera che venga visualizzato un Menu di Pagina contenente l'elenco delle Pagine del Livello corrente, occorre attivare l'opzione Visualizza Menu di Pagina.

Fatto questo, è possibile agire sulle opzioni del riquadro Stile:

§Posizione Menu: specifica se il Menu di Pagina deve essere visualizzato sul lato destro o sinistro della Pagina.

§Larghezza: imposta il valore in pixel della larghezza dei Pulsanti contenenti le voci di Menu.

§Margine: imposta il valore in pixel del margine orizzontale e del margine verticale, ovvero dello spazio presente tra il bordo del Pulsante e il testo contenuto.

§Distanza tra i Pulsanti: imposta il valore in pixel del margine esterno, ovvero dello spazio presente tra un Pulsante e l'altro.

Le opzioni presenti nel riquadro Testo sono:

§Tipo di Font: specifica il Tipo di carattere, lo Stile e le dimensioni del testo.

§Allineamento: definisce l'allineamento del testo a Sinistra, al Centro o a Destra rispetto al Pulsante.

Infine, il riquadro Bordo consente di disegnare un bordo attorno al Menu di Pagina (non ai singoli Pulsanti) definendo le seguenti opzioni:

§Spessore: specifica lo spessore dei bordi, anche singolarmente.

§Colore: specifica il colore dei bordi, anche singolarmente.

§Smusso: definisce il fattore di smusso per gli angoli, anche singolarmente.

§Ombra: applica un'ombra, definendone il colore, la posizione, la diffusione e la dimensione.
Clicca per espandere/ridurre Reference: I comandi della sezione Voci Menu

Attraverso i comandi di questa sezione si definiscono alcuni parametri grafici per definire l'aspetto delle voci del Menu di Pagina.

Per prima cosa, occorre selezionare l'Elemento del Menu su cui si vuole lavorare: è possibile definire l'aspetto della [image] Voce del Menu, della [image] Voce su passaggio del mouse/Pagina corrente, del [image] Separatore e della [image] Linea di separazione. Per selezionare l'Elemento del Menu è possibile utilizzare o l'apposito menu a tendina o agire direttamente sull'immagine di Anteprima che viene costantemente aggiornata in base alle modifiche apportate.

§Colore Sfondo / Colore Testo / Colore Linea: definiscono il colore per lo sfondo e per il testo della Voce del Menu, della Voce su passaggio del mouse/Pagina corrente e del Separatore, oltre che il colore della linea per la Linea di separazione.

§Icona punto elenco: disponibile per gli Elementi Voce del Menu, Voce su passaggio del mouse/Pagina corrente e Separatore, importa l'immagine (file in formato .JPG, .GIF, .PNG) che deve precedere le voci del Menu di Pagina, come se si trattasse di un punto elenco.

§Stile Font: per gli Elementi Voce su passaggio del mouse/Pagina corrente e Separatore, definisce lo stile del testo scegliendo tra Normale, Grassetto, Corsivo e Grassetto Corsivo.

§Stile Linea: disponibile solo per l'Elemento Linea di separazione, imposta il tipo di tratto scegliendo tra Pieno, Tratteggiato, Punti, Bassorilievo, Altorilievo.

Approfondimenti:

-

La struttura di navigazione di un Sito


Stili e Modelli

Passo 4 - Impostazioni Avanzate >

Stili e Modelli

 Return to chapter overview
Mostra/Nascondi testo nascosto

Questa finestra presenta i comandi per definire gli stili da applicare ai diversi elementi di testo presenti nelle Pagine, alla finestra ShowBox legata ad elementi come l'Oggetto Galleria e l'Oggetto Elenco Prodotti, alle Tooltip che possono essere associate ai Collegamento e alle e-mail create se si utilizza l'Oggetto Modulo Invio E-mail o se si imposta un Carrello e-commerce.

Uno Stile può essere genericamente definito come un insieme di impostazioni relative alla formattazione del testo e alla grafica che può essere applicato ad un elemento per modificarne l'aspetto. L'applicazione di uno Stile, dunque, consente di associare più formati contemporaneamente con una singola operazione.

I comandi necessari per procedere alla definizione degli Stili sono organizzati nelle seguenti sezioni: Testi, ShowBox, ToolTip e E-mail.

Clicca per espandere/ridurre Reference: I comandi della sezione Testi

Attraverso i comandi di questa sezione si definiscono gli Stili utilizzabili per i Testi presenti nel Sito.

Innanzi tutto, occorre scegliere l'Elemento della Pagina del quale si vuole definire lo Stile, selezionandolo attraverso l'apposito menu a tendina o, in alternativa, cliccando direttamente in sua corrispondenza sull'Anteprima.

Nello specifico, gli Elementi di Pagina per i quali viene identificato e applicato uno Stile sono:

Titolo della Pagina: è il Titolo delle varie Pagine del Sito. Viene ripreso dal nome dato alle Pagine in fase di costruzione della Mappa nella finestra Creazione della Mappa o, se diversamente specificato, dal Titolo per esteso della finestra Proprietà Pagina.

Percorso della Pagina: è il testo riportato immediatamente sotto al Titolo della Pagina, mediante il quale viene ricostruito il percorso logico (navigazione a briciole di pane) che porta alla Pagina stessa. Il percorso logico viene ricreato automaticamente dal Programma.

Testo della Pagina: è il testo dei singoli paragrafi inseriti attraverso l'Oggetto Testo. Lo stile di questo elemento viene applicato di default quando si apre l'editor relativo all'Oggetto Testo: tramite i comandi messi a disposizione dall'editor stesso è poi possibile procedere a ulteriori modifiche e personalizzazioni. Lo Stile definito per questo tipo di elemento viene applicato anche a tutti i testi creati e inseriti in automatico dal Programma come, per esempio, le Pagine dell'Area riservata, del Blog, del Motore di ricerca interno e della Mappa del Sito.

Collegamento attivo / Collegamento su passaggio del mouse / Collegamento già visitato: sono i collegamenti ipertestuali creati attraverso l'Oggetto Testo. Un collegamento può presentare un aspetto diverso a seconda dello stato assunto: attivo, su passaggio del mouse (effetto mouseover) o visitato. Distinguere visivamente un collegamento attivo da un collegamento già visitato è utile per semplificare la navigazione del Visitatore, ricordandogli quali sezioni ha già esplorato.

Campo / Pulsante: sono i campi e i pulsanti dei moduli creati attraverso l'Oggetto Modulo Invio E-mail o il carrello di e-commerce, oltre che di elementi come il Campo di Ricerca (vedere, Modifica del Modello | Inserisci Campo di Ricerca), i campi di Login/Logout legati all'Area Riservata, ecc. Lo stile di questi elementi viene applicato di default quando si crea un nuovo Oggetto Modulo Invio E-mail: sarà poi possibile modificare tali impostazioni per il singolo Modulo attraverso le apposite opzioni presenti nella sezione Oggetto Modulo Invio E-mail | Stile.

Menu di fondo Pagina: è il Menu, riportato al fondo di ciascuna Pagina, in cui vengono riproposte le voci del Menu Principale.

Selezionato l'Elemento della Pagina, è possibile modificarne lo stile agendo sulle seguenti opzioni comprese nel riquadro Stile:

§Visualizza: fa in modo che l'elemento di Pagina sia visibile o meno. Questa opzione, ovviamente, non è disponibile per il Testo della Pagina, i diversi stati del Collegamento, i Campi e i Pulsanti che non possono essere invisibili. È importante specificare che rendere non visibile un Elemento della Pagina non significa eliminarlo anche dal codice della Pagina stessa: si può, per esempio, rendere non visibile il Titolo della Pagina perché si preferisce inserirlo come immagine ma, anche in questo caso, non verrà eliminato il tag <title> dal codice HTML.

§Colore Sfondo / Colore Testo: specificano il colore dello sfondo e del testo dell'Elemento di Pagina selezionato. Solo per il Testo della Pagina non è possibile definire il colore dello sfondo dal momento che viene impostato in base al Modello scelto (vedere, Scelta del Modello, o Modello Personalizzato) e/o allo Stile della Cella in cui è inserito l'Oggetto Testo.

§Tipo di Font: specifica il Tipo di carattere, lo Stile e le dimensioni del testo.

§Allineamento: specifica l'allineamento dell'Elemento di Pagina, scegliendo tra Sinistra, Centro e Destra. Questa opzione non è disponibile per i diversi stati del Collegamento, dal momento che l'allineamento dei link ipertestuali viene definito, indipendentemente dallo Stile, in fase di creazione dell'Oggetto Testo, né per i Campi e i Pulsanti.

§Stile Testo: disponibile solo per il Collegamento nei diversi stati, imposta lo stile del testo come Normale o Sottolineato.

§Puntatore: disponibile solo per il Collegamento attivo, ed ereditato automaticamente anche dagli altri due stati del Collegamento, specifica l'aspetto assunto dal puntatore del mouse su passaggio sul link. Cliccando su [image] si può selezionare il file .CUR, .ICO da utilizzare.

§Colore Bordo: specifica il colore dei bordi che possono essere aggiunti al Titolo della Pagina, al Percorso della Pagina, al Campo, Pulsante e al Menu di fondo Pagina.

§Smusso: definisce il fattore di smusso per gli angoli del Campo e del Pulsante, anche singolarmente.

§Ombra interna: applica un'ombra all'interno del Campo, definendone il colore, la posizione, la diffusione e la dimensione.

§Margine orizzontale: specificano il margine orizzontale per il Titolo della Pagina, il Percorso della Pagina e il Menu di fondo Pagina.
Clicca per espandere/ridurre Reference: I comandi della sezione ShowBox

Attraverso i comandi di questa sezione si definisce lo Stile della finestra ShowBox utilizzata nelle Gallerie (vedere, Oggetto Galleria), nel Collegamento Galleria con ShowBox (vedere, Collegamento | Azione) e nell'Oggetto Elenco Prodotti. In tutti i casi la finestra ShowBox viene aperta su collegamento e serve per visualizzare un'Immagine ingrandita, un Video o un'intera sequenza di immagini: al click sul collegamento la finestra del Browser viene oscurata per dare risalto alla finestra ShowBox, visualizzata sovrapposta in base all'effetto di entrata impostato.

Le opzioni disponibili nella sezione Stile sono:

§Effetto di comparsa: imposta un effetto di entrata per la finestra ShowBox scegliendo tra Nessuno, Dissolvenza, Discesa dall'alto, Ingrandimento, Ingrandimento e scomparsa immagine iniziale. Gli effetti Ingrandimento e Ingrandimento e scomparsa immagine iniziale sono fra loro simili ma si distinguono per il fatto che l'immagine di partenza rimane o meno visibile durante l'ingrandimento. L'effetto Ingrandimento e scomparsa immagine iniziale è, dunque, particolarmente indicato quando il link che provoca la visualizzazione della finestra ShowBox è associato a un'immagine piuttosto che a un testo.

§Colore esterno / Colore interno: definiscono il colore dello sfondo esterno e/o interno alla finestra ShowBox. Il colore dello sfondo esterno è quello che viene reso semi-trasparente (in base al valore impostato per l'opzione Opacità Sfondo) e utilizzato per oscurare la finestra del Browser sottostante.

§Opacità Sfondo: imposta il valore di opacità dello sfondo esterno. Più è alto il valore dell'opacità, meno la finestra del Browser sottostante sarà visibile.

Le opzioni presenti nel riquadro Testo sono:

§Colore Testo: definisce il colore per il testo della finestra ShowBox.

§Tipo di Font: specifica il Tipo di carattere, lo Stile e le dimensioni del testo.

§Allineamento: definisce l'allineamento del testo a Sinistra, al Centro o a Destra rispetto alla finestra ShowBox.

Il riquadro Bordo presenta le seguenti opzioni:

§Spessore: specifica lo spessore dei bordi, anche singolarmente.

§Colore: specifica il colore dei bordi, anche singolarmente.

§Smusso: definisce il fattore di smusso per gli angoli, anche singolarmente.

§Ombra: applica un'ombra, definendone il colore, la posizione, la diffusione e la dimensione.
Clicca per espandere/ridurre Reference: I comandi della sezione ToolTip

Attraverso i comandi di questa sezione si definisce lo Stile da applicare alle Tooltip associate ai Collegamenti inseriti su Testi o Immagini attraverso l'apposito comando Inserisci collegamento Collegamento. La Tooltip è un breve testo di aiuto, visualizzato all'interno di un box in relazione al passaggio del mouse su un Collegamento: la sua funzione è di offrire una spiegazione su cosa accadrà cliccando.

Per definire l'aspetto delle Tooltip è possibile, in primo luogo, utilizzare le opzioni presenti nel riquadro Stile:

§Posizione ToolTip: specifica la posizione delle Tooltip rispetto al Collegamento a cui sono associate, scegliendo tra Alto, Basso, Sinistra e Destra.

§Effetto di comparsa: imposta un effetto di comparsa sulla Tooltip, scegliendo fra Nessuno, Disssolvenza e Rimbalzo.

§Colore Sfondo: specifica il colore dello sfondo delle Tooltip.

§Opacità Sfondo: imposta il valore di opacità dello sfondo esterno. Più è alto il valore dell'opacità, meno la finestra del Browser sottostante sarà visibile.

§Mostra freccia: aggiunge al baloon (ovvero la forma, il fumetto) delle Tooltip una freccia in direzione del collegamento a cui sono associate.

Infine, le opzioni presenti nel riquadro Testo sono:

§Colore Testo: definisce il colore per il testo delle Tooltip.

§Tipo di Font: specifica il Tipo di carattere, lo Stile e le dimensioni del testo.

§Allineamento: definisce l'allineamento del testo a Sinistra, al Centro o a Destra rispetto alla Tooltip.

Il riquadro Bordo presenta le seguenti opzioni:

§Spessore: specifica lo spessore dei bordi, anche singolarmente.

§Colore: specifica il colore dei bordi, anche singolarmente.

§Smusso: definisce il fattore di smusso per gli angoli, anche singolarmente.

§Ombra: applica un'ombra, definendone il colore, la posizione, la diffusione e la dimensione.

Le impostazioni di Stile sono valide per il Progetto intero e quindi tutte le Tooltip avranno lo stesso aspetto grafico. Per definire il contenuto (testo e immagine) di ciascuna Tooltip è necessario, invece, agire attraverso la finestra Collegamento | Descrizione.
Clicca per espandere/ridurre Reference: I comandi della sezione E-mail

Attraverso i comandi di questa sezione si definisce lo Stile delle E-mail create dall'Oggetto Modulo Invio E-mail o dal Carrello e-commerce.

Innanzi tutto, occorre selezionare l'Elemento della e-mail del quale si vuole definire lo Stile selezionandolo attraverso l'apposito menu a tendina o, in alternativa, cliccando direttamente in sua corrispondenza sull'Anteprima.

Nello specifico, gli Elementi della e-mail per i quali viene identificato e applicato uno Stile sono:

Struttura della e-mail: le e-mail create dal programma hanno tutte un'identica struttura che prevede un telaio esterno di sfondo e un corpo centrale con il messaggio. Fra il telaio esterno e il corpo centrale può essere previsto anche un bordo che separa o crea profondità e spessore.

Immagine/Logo azienda: è un'immagine che può essere aggiunta nell'intestazione dell'e-mail. Può essere inserito un semplice logo aziendale o un banner che giunge ad occupare l'intera larghezza dell'e-mail.

Contenuto del messaggio: è il corpo dell'e-mail dove viene riportato il messaggio.

Note a piè di Pagina: sono le note di chiusura dell'e-mail che, in genere, riportano un messaggio standard e si distinguono visivamente dal corpo del messaggio almeno per il fatto di avere una dimensione del font inferiore.

In base all'Elemento della e-mail selezionato è possibile agire su diverse opzioni presentate nella sezione Stile:

Struttura della e-mail

§Colore Sfondo: specifica il colore dello sfondo esterno, ovvero del telaio, della e-mail.

§Colore Bordo / Spessore: specificano il colore e lo spessore del bordo che separa il telaio esterno dal corpo della e-mail.

Immagine/Logo azienda

§File Immagine: seleziona l'immagine da inserire nell'intestazione della e-mail. È sufficiente cliccare su [image] per selezionare il file grafico in formato .JPG, .GIF o .PNG da importare.

§Allineamento: specifica l'allineamento dell'Immagine inserita, scegliendo tra Sinistra, Centro e Destra.

§Posizione: specifica se l'Immagine inserita deve essere posizionata Dentro il riquadro o Fuori dal riquadro relativo al corpo della e-mail.

§Larghezza: riporta in automatico la larghezza originale dell'Immagine e permette di modificarla liberamente. La larghezza massima per le Immagini è di 700 pixel e dipende dalla struttura della e-mail. Tale parametro garantisce una corretta visualizzazione da parte di tutti i client di posta.

Contenuto del messaggio

§Colore Sfondo: specifica il colore dello sfondo del testo del messaggio dell'e-mail.

§Colore Testo: specifica il colore del testo del messaggio dell'e-mail.

§Tipo di Font: specifica il Tipo di carattere, lo Stile e le dimensioni del testo.

Note a piè di Pagina

§Colore Sfondo: specifica il colore dello sfondo del testo delle note riportate in chiusura dell'e-mail.

§Colore Testo: specifica il colore del testo delle note riportate in chiusura dell'e-mail.

§Tipo di Font: specifica il Tipo di carattere, lo Stile e le dimensioni del testo.

§Allineamento: specifica l'allineamento delle Note a piè di Pagina, scegliendo tra Sinistra, Centro e Destra.

§Posizione: specifica se le Note a piè di Pagina devono essere posizionate Dentro il riquadro o Fuori dal riquadro relativo al corpo della e-mail.

§Testo: permette di comporre il testo che deve essere riportato come Nota a Piè di Pagina. Di default viene proposto un testo sulla riservatezza del messaggio.


Pagina di Benvenuto

Passo 4 - Impostazioni Avanzate >

Pagina di Benvenuto

 Return to chapter overview
Mostra/Nascondi testo nascosto

Questa finestra presenta i comandi necessari per creare una Pagina di introduzione al Sito e per predisporlo alla consultazione in diverse Lingue.

Come dice il nome, la Pagina di Benvenuto è una specie di copertina iniziale del Sito: in genere presenta semplicemente un'Immagine, un Video o un'Animazione Flash e permette di accedere alla vera Home Page allo scadere di un tempo prefissato o al click su un collegamento. Se necessario, questa Pagina introduttiva può presentare anche i collegamenti per permettere la scelta della Lingua di consultazione del Sito.

Clicca per espandere/ridurre Reference: I comandi per impostare una Pagina di Benvenuto

Dal momento che la Pagina di Benvenuto è un elemento facoltativo di un Sito, perché venga inserita è necessario, per prima cosa, attivare l'opzione Visualizza Pagina di Benvenuto. Se presente, la Pagina di Benvenuto è la prima ad essere visualizzata e solo allo scadere di un tempo prefissato o al click su un collegamento appositamente predisposto viene visualizzata l'Home Page del Sito.

È possibile comporre la Pagina di Benvenuto definendone il Contenuto e lo Sfondo, oltre che impostando un'eventuale Colonna Sonora.

Le opzioni presentate nel riquadro Contenuto della Pagina sono:

§Tipo: specifica che tipo di contenuto deve essere inserito nella Pagina di Benvenuto, scegliendo tra Immagine, Animazione Flash, Video e Codice HTML.

§File: attiva se si sceglie come Tipo di contenuto l'Immagine, l'Animazione Flash o il Video, importa il file grafico (in formato .JPG, .GIF, .PNG), il file Animazione Flash (in formato .SWF) o il File Video (in formato .FLV, .MP4, .WEBM, .OGG) da utilizzare.

§Codice HTML: attiva se si scelga come Tipo di contenuto il Codice HTML, permette di digitare il codice da inserire nella Pagina di Benvenuto. La Barra Strumenti presente mette a disposizione i seguenti comandi:

Taglia [CTRL+X] - Copia [CTRL+C] - Incolla [CTRL+V]

Tagliano, copiano e incollano il testo selezionato.

Annulla [CTRL+Z] - Ripristina [ALT+MAIUSC+BACKSPACE]

Annullano e ripristinano l'ultima operazione eseguita/annullata.

Inserisci Widgets

Inserisce il codice relativo alla Widget selezionata: cliccando sulla freccia a lato del pulsante, è possibile visualizzare la lista di tutte le Widgets disponibili, riprese dall'elenco dell'Oggetto HTML e Widgets. Facendo click sulla Widget desiderata viene richiamata la finestra Widget attraverso la quale è possibile definire i parametri previsti. Confermando, il codice HTML relativo alla Widget viene composto e automaticamente inserito nell'editor.

§Dimensioni: specifica le dimensioni in pixel della larghezza e dell'altezza dell'Immagine, dell'Animazione Flash, del Video o del Codice HTML inseriti. Lasciando attiva l'opzione Mantieni proporzioni, nell'impostazione delle dimensioni viene mantenuta inalterata la proporzione fra la larghezza e l'altezza.

Le opzioni presentate nel riquadro Sfondo della Pagina sono:

§Colore Sfondo: specifica il colore di sfondo della Pagina di Benvenuto.

§File Immagine: seleziona il file grafico (.JPG, .GIF, .PNG.) relativo all'immagine da utilizzare come sfondo.

§Disposizione: specifica se l'immagine inserita come sfondo deve essere ripetuta o meno. L'Immagine può essere ripetuta solo in senso orizzontale, solo in senso verticale o in entrambe i sensi, in modo da giungere ad occupare l'intero spazio a disposizione. In più, è possibile fare in modo che l'immagine venga adattata, ovvero ridimensionata in modo da coprire tutto lo sfondo.

§Allineamento: specifica come deve essere allineata l'Immagine inserita rispetto alla finestra del Browser.

Infine, il riquadro Opzioni presenta le seguenti opzioni:

§Suono in ingresso: specifica il file audio (in formato .MP3) da utilizzare come sottofondo musicale durante la visualizzazione della Pagina di Benvenuto.

§Salta alla Home Page dopo [sec]: specifica per quanti secondi deve essere visualizzata la Pagina di Benvenuto. Trascorso l'intervallo di tempo impostato, viene automaticamente visualizzata la Home Page.
Clicca per espandere/ridurre Reference: I comandi per impostare la lingua di consultazione

Se il Sito deve poter essere consultato in Lingue diverse e si desidera dare la possibilità al Visitatore di selezionare quella da utilizzare attraverso dei Pulsanti inseriti nella Pagina di Benvenuto è necessario, innanzi tutto, attivare l'opzione Visualizza collegamento ad altre Lingue.

Nel riquadro Elenco Lingue occorre comporre la lista delle Lingue in cui il Sito sarà disponibile. Di default viene proposto un elenco composto da 5 Lingue che, in qualsiasi caso, può essere liberamente modificato attraverso i comandi disponibili:

§Aggiungi... / Rimuovi: permettono di comporre l'elenco delle Lingue di consultazione consentendo, rispettivamente, di aggiungere una nuova Lingua (tramite la finestra richiamata Impostazioni Lingua) o di cancellare una Lingua già inserita.

§Sposta Sopra / Sposta Sotto: agiscono sull'ordine di visualizzazione delle Lingue già presenti, spostando verso l'alto o verso il basso quella selezionata.

§Predefinito: imposta come "predefinita" la Lingua selezionata all'interno dell'Elenco Lingue. Deve essere impostata come "predefinita" la Lingua del Sito a cui i Visitatori devono accedere immediatamente, prima ancora di effettuare la scelta della Lingua di consultazione preferita. Il Sito nella Lingua predefinita è l'unico che presenta la Pagina di Benvenuto (per maggiori informazioni, vedere Come creare un Sito multi-lingua).

§Modifica...: richiama la finestra Impostazioni Lingua in modo da modificare i parametri impostati per la Lingua selezionata fra quelle già inserite nell'Elenco Lingue.

Infine, è disponibile l'opzione:

§Esegui collegamento in una nuova finestra: attivando questa opzione, il Sito viene aperto in una nuova finestra del Browser, diversa da quella in cui è già aperta la Pagina di Benvenuto.

Anche se nella finestra relativa alla Pagina di Benvenuto si parla esplicitamente di Lingue, è possibile sfruttare questa gestione per permettere al Visitatore di scegliere non solo fra Lingue di consultazione diverse ma, più genericamente, fra diverse versioni di uno stesso Sito. Per esempio, si potrebbe impostare la scelta tra "Versione HTML / Versione Flash" o tra "Versione adatta ai minori / Versione solo per adulti".

Attivando la visualizzazione di una Pagina di Benvenuto, viene automaticamente visualizzata sulla Mappa la Pagina Speciale "Pagina di Benvenuto": è possibile selezionarla e richiamare la finestra Proprietà Pagina per definirne le proprietà principali.

Best practice:

- | Come gestire le Lingue per i testi inseriti in automatico
- | Come creare un Sito multi-lingua


imp_lingua

Impostazioni Lingua

Passo 4 - Impostazioni Avanzate > Pagina di Benvenuto >

Impostazioni Lingua

 Return to chapter overview

Questa finestra, richiamata cliccando sul pulsante Aggiungi... o sul pulsante Modifica... presenti nella finestra Pagina di Benvenuto, permette di impostare alcuni parametri relativi a una lingua in cui il Sito Web è disponibile per la consultazione.

Le opzioni disponibili sono:

§Nome della Lingua da visualizzare: inserisce il nome della Lingua che si desidera rendere disponibile. Cliccando sulla freccia affiancata al campo è possibile aprire un menu a tendina con un elenco di Lingue e selezionare quella da inserire: in alternativa, è comunque possibile digitare direttamente in nome della Lingua.

§File Immagine per questa Lingua (es: bandiera): importa il file grafico da utilizzare per creare il Pulsante associato alla Lingua. Cliccando su [image] si può selezionare il file .JPG, .GIF o .PNG da utilizzare, per esempio, per creare un Pulsante con l'Immagine della bandiera relativa alla Lingua.

Nel caso non venga associata alcuna Immagine, invece di un Pulsante grafico verrà automaticamente creato un collegamento testuale utilizzando il Nome della Lingua da visualizzare come testo.

§Collegamento per questa Lingua (es: mostra il Sito in questa lingua): imposta un link sull'immagine importata attraverso l'opzione File Immagine per questa Lingua (es: bandiera).

§Cliccando sul pulsante [image] viene richiamata la finestra Collegamento attraverso la quale è possibile scegliere il tipo di azione oltre che le relative opzioni.

Se, per esempio, il Sito nella Lingua indicata dalla bandierina è stato già pubblicato, è possibile scegliere l'azione File o URL e specificare la URL in modo da collegarlo (es, http://www.miosito.it/en/index.html). Nel caso si stia lavorando sulla Lingua impostata come Predefinita non è possibile preveder alcun link poiché viene associato automaticamente il collegamento alla Home Page del Sito corrente.

Note sulla compatibilità con le versioni precedenti:

Rispetto alle predente versione 9, nell'attuale versione 10 la finestra Impostazioni Lingua presenta i seguenti aggiornamenti:

§L'opzione Cartella su Server o URL del Sito per questa Lingua è stata sostituita con l'opzione Collegamento per questa Lingua (es: mostra il Sito in questa lingua): in questo modo è possibile impostare, come prima, il link che punta alla cartella su Server o alla URL del Sito in una lingua specifica, ma anche azioni diverse.

§L'opzione Visualizza la scelta per questa lingua ma avvisa che non è ancora disponibile non è più presente dato che è possibile creare un messaggio personalizzato, impostando il collegamento più opportuno sull'immagine delle bandierina.

Best practice:

- | Come gestire le Lingue per i testi inseriti in automatico
- | Come creare un Sito multi-lingua


Messaggio Pubblicitario

Passo 4 - Impostazioni Avanzate >

Messaggio Pubblicitario

 Return to chapter overview
Mostra/Nascondi testo nascosto

Questa finestra presenta i comandi attraverso i quali è possibile procedere all'impostazione di un Messaggio Pubblicitario sulla Home Page o su tutte le Pagine del Sito.

Il Messaggio Pubblicitario può essere creato come un'Immagine o un'Animazione Flash, visualizzata in una posizione determinata della Pagina, sulla quale viene impostato un collegamento a una Landing Page (o Pagina di destinazione). Ovviamente la Landing Page, che non è altro che una Pagina interna del Sito, dovrà essere studiata per riuscire a convincere il Visitatore a portare a termine l'azione desiderata: compilare un form, effettuare un acquisto, ecc.

Clicca per espandere/ridurre Reference: I comandi per impostare un Messaggio Pubblicitario

Se si desidera inserire un Messaggio Pubblicitario occorre, per prima cosa, attivare l'opzione Visualizza Messaggio Pubblicitario.

È possibile scegliere il Tipo di messaggio da impostare, selezionando una delle seguenti voci:

Messaggio sull'angolo superiore destro: corrisponde all'effetto che viene generalmente indicato come PagePeel in cui, posizionando il mouse sull'angolo superiore destro della Pagina, lo si "sfoglia" scoprendo il messaggio pubblicitario sottostante.

Messaggio in riquadro: il messaggio pubblicitario viene inserito in un riquadro, visualizzato in una posizione specificata della finestra del Browser, in sovrimpressione rispetto ai contenuti della Pagina.

Messaggio su barra orizzontale: il messaggio pubblicitario viene proposto attraverso una barra orizzontale visualizzata in cima della finestra del Browser, prima del contenuto reale della Pagina, o sul fondo della finestra del Browser, in sovrimpressione rispetto ai contenuti della Pagina.

Per qualsiasi Tipo di messaggio selezionato, è possibile agire sull'opzione del riquadro Impostazioni:

§File Immagine: specifica il file grafico (in formato .JPG, .GIF, .PNG) o il file dell'Animazione Flash (in formato .SWF) contenente il Messaggio Pubblicitario che si vuole proporre.

Per il Messaggio sull'angolo superiore destro le altre opzioni disponibili sono:

§Stile: permette di scegliere, oltre al classico effetto dell'angolo della Pagina arricciato (PagePeel), anche fra altre animazioni a tema. Il funzionamento dell'effetto rimane comunque inalterato: al passaggio del mouse sull'animazione, il Visitatore apre il Messaggio Pubblicitario vero e proprio.

§Larghezza/Altezza: specifica il valore in pixel che devono avere la larghezza e l'altezza dell'area destinata a visualizzare il Messaggio Pubblicitario.

Per il Messaggio in riquadro le altre opzioni disponibili sono:

§Posizione: stabilisce dove verrà visualizzato il Messaggio Pubblicitario all'interno della finestra del Browser. È possibile posizionarlo al Centro, in Alto a Sinistra, in Alto a Destra, in Basso a Sinistra e in Basso a Destra.

§Effetto: imposta un effetto di visualizzazione scegliendo tra Dissolvenza, Comparsa dall'alto, Comparsa dal basso, Comparsa da sinistra, Comparsa da destra.

§Visualizza messaggio solo una volta: se attivata, fa in modo che il Messaggio Pubblicitario venga visualizzato solo una volta, alla prima apertura di una Pagina del Sito. Aprendo una nuova sessione di navigazione, il Messaggio Pubblicitario verrà comunque riproposto.

Infine, per il Messaggio su barra orizzontale le altre opzioni disponibili sono:

§Posizione: definisce se la barra con il Messaggio Pubblicitario deve essere visualizzato in alto, prima dei contenuti della Pagina, o al fondo, in sovrimpressione sulla parte terminale della Pagina.

§Colore Sfondo: definisce il colore per lo sfondo della barra orizzontale contenente il Messaggio Pubblicitario.

§Visualizza messaggio solo una volta: se attivata, fa in modo che il Messaggio Pubblicitario venga visualizzato solo una volta, alla prima apertura di una Pagina del Sito. Aprendo una nuova sessione di navigazione, il Messaggio Pubblicitario verrà comunque riproposto.

Le voci presenti nel riquadro Opzioni, comuni a tutti i tipi di messaggio, sono:

§Collegamento: imposta il link (generalmente a una Pagina di destinazione o Landing Page) che deve essere attivato cliccando sul Messaggio Pubblicitario.

§Cliccando sul pulsante [image] viene richiamata la finestra Collegamento attraverso la quale è possibile scegliere il tipo di azione oltre che le relative opzioni.

§Suono in ingresso: importa il file audio (in formato .MP3) che deve essere riprodotto durante la visualizzazione del Messaggio Pubblicitario.

Cos'è una Landing page?

La Landing Page è una Pagina destinata ad accogliere un Visitatore e viene visualizzata perché collegata, per esempio, ad un link o ad un banner pubblicitario. Come suggerisce il nome, è la Pagina in cui il Visitatore "atterra" e deve essere costruita in maniera da permettergli di trovare subito le informazioni desiderate, evitandogli di dover navigare nel Sito alla loro ricerca.

Il meccanismo può essere efficacemente spiegato con un esempio: pubblichiamo un banner per reclamizzare la vendita di un prodotto. Le informazioni veicolate dal banner sono poche ed essenziali ma possiamo impostare un link per guidare il Visitatore interessato al nostro Sito. In questo caso, è controproducente linkare direttamente la Home Page del nostro Sito: è troppo generica e costringerebbe il Visitatore ad intraprendere una navigazione interna prima di trovare le informazioni necessarie sul prodotto e su come procedere all'acquisto. Il rischio è di perdere subito un potenziale cliente. La soluzione migliore, invece, è di costruire una Pagina ad hoc in cui presentare, con un layout semplice e funzionale, tutte le informazioni che il Visitatore si aspetta di trovare sul prodotto reclamizzato nel banner, incluse le istruzioni per procedere nell'acquisto. Molto spesso una Pagina di questo tipo deve essere costruita appositamente ma, se ben fatta, ha il vantaggio di guidare verso l'obiettivo desiderato (nell'esempio, l'acquisto di un prodotto) il Visitatore attirato dal nostro messaggio pubblicitario.

Infine, nel riquadro Modalità di visualizzazione sono disponibili le opzioni:

§Mostra solo nella Home Page / Mostra in tutte le Pagine del Sito: definiscono dove deve essere visualizzato il Messaggio Pubblicitario, se solo nella Home Page oppure in tutte le Pagine del Sito.

Best practice:

-

Come inserire dei messaggi pubblicitari all'interno del proprio Sito


Blog

Passo 4 - Impostazioni Avanzate >

Blog

 Return to chapter overview
Mostra/Nascondi testo nascosto

Questa finestra propone gli strumenti e le opzioni necessarie per procedere alla creazione di un Blog e alla gestione dei commenti che possono essere lasciati dai Visitatori in risposta agli Articoli pubblicati.

Un Blog è una sorta di diario in rete in cui l'Autore racconta ciò di cui vuole parlare attraverso una serie di Articoli (o Post) pubblicati con frequenza e regolarità variabile.

Una volta pubblicato, il Blog creato con WebSite X5 rappresenta una sezione a se stante del Sito principale e nella Mappa viene automaticamente aggiunto all'interno della cartella Pagine Speciali (vedere, Creazione della Mappa). Se si desidera inserire la voce "Blog" all'interno del Menu di navigazione, occorre creare un Alias della Pagina Speciale selezionandola e trascinandola all'interno della cartella Menu.

Essendo parte integrante del Sito Web, il Blog ne condivide la grafica, riprendendo automaticamente il template grafico impostato.

Il Blog creato viene pubblicato alla URL http://www.miosito.it/blog dove http://www.miosito.it è l'URL del Sito a cui è collegato.

Nella Pagina principale del Blog viene visualizzato l'elenco di tutti gli Articoli (o Post) pubblicati, disposti in ordine cronologico. Per tutti gli Articoli viene riportato il titolo, l'indicazione di Autore, categoria, data e ora di pubblicazione, e, se visualizzati in forma ridotta piuttosto che estesa, la descrizione breve e il link "Leggi tutto". Se presente, il link "Leggi tutto" porta ad una Pagina interamente dedicata ad un singolo Post: in questo caso viene visualizzato tutto il testo dell'Articolo, seguito dalla lista dei commenti già pubblicati e dalla form che i lettori possono utilizzare per inviare un nuovo commento.

Al di là dei singoli contenuti, tutte le Pagine del Blog presentano una struttura analoga che prevede una colonna posizionata sulla destra, dedicata alla presentazione di strumenti come: la sezione con gli Articoli Recenti, l'Archivio per mese o per categorie, le Nuvole. In base alle proprie esigenze, è possibile personalizzare questa colonna e decidere quali strumenti rendere disponibili e in che ordine presentarli.

Infine, come detto, una delle peculiarità dei Blog è quella di permettere a chi legge gli articoli di lasciare un commento: in questo modo, partendo dallo spunto rappresentato dal Post pubblicato, si può sviluppare una discussione tra chi scrive e coloro che leggono. Per evitare che rimangano pubblicati anche commenti non desiderati, perché offensivi o non inerenti al tema, è necessario poterli gestire: per far questo, WebSite X5 mette a disposizione un apposito Pannello di Controllo online.

Per creare un Blog è sufficiente impostare alcuni parametri generali e creare l'elenco delle notizie che si vogliono distribuire.

Una volta impostato, sarà necessario mantenere vivo l'interesse dei lettori proponendo con una certa regolarità e frequenza nuovi post. A tal proposito, in fase di esportazione sarà possibile pubblicare solo gli aggiornamenti relativi al Blog grazie all'opzione Esporta solo il Blog e il Feed RSS disponibile nella finestra Esportazione del Sito su Internet.

I comandi necessari per configurare il Blog e procedere alla creazione degli Articoli sono raccolti nelle seguenti sezioni: Articoli, Struttura e Commenti.

Clicca per espandere/ridurre Reference: I comandi della Sezione Articoli

Attraverso i comandi di questa Sezione si definiscono alcuni parametri generali e si procede alla composizione della lista degli Articoli (o Post) che dovranno essere pubblicati nel Blog.

Nel riquadro Impostazioni Generali sono incluse le seguenti opzioni:

§Titolo: in questo campo si può digitare il titolo da dare al Blog. Questo titolo verrà visualizzato nella Barra del titolo del Browser ed è, ovviamente, un parametro importante per permettere a utenti e Motori di ricerca di individuare correttamente il Blog.

Se non viene specificato alcun titolo per il Blog, viene automaticamente ripreso il titolo associato al Sito attraverso l'apposita opzione della finestra Impostazioni Generali | Base.

§Descrizione: in questo campo si può digitare una breve descrizione del Blog. È bene che il contenuto della descrizione sia conciso, efficace e significativo per il Blog a cui fa riferimento: questa descrizione, infatti, verrà utilizzata nel codice HTML come contenuto del metatag <description> e sarà analizzata dagli spider dei Motori di Ricerca.

Anche in questo caso, se non viene specificata alcuna descrizione per il Blog, viene automaticamente ripresa la descrizione associata al Sito attraverso l'apposita opzione della finestra Impostazioni Generali | Base.

§Crea Feed RSS con i contenuti del Blog: attiva di default, fa in modo che venga creato in automatico un Feed RSS con tutti gli Articoli del Blog. Il percorso dei Feed RSS del Blog è http://www.miosito.it/blog/x5feed.xml dove http://www.miosito.it è la URL del Sito a cui è collegato.

Nel riquadro Elenco Articoli sono disponibili, invece, una Tabella riassuntiva che riporta il Titolo, l'Autore, la Categoria di appartenenza e la Data di rilascio di tutti i Post già inseriti e i comandi necessari per creare e gestire gli Articoli:

§Aggiungi...: richiama la finestra Impostazioni Articolo per procedere all'inserimento di un nuovo Articolo.

§Rimuovi: elimina l'Articolo selezionato fra quelli presenti nell'Elenco Articoli.

§Modifica...: richiamare la finestra Impostazioni Articolo per modificare l'Articolo selezionato fra quelli presenti nell'Elenco Articoli.
Clicca per espandere/ridurre Reference: I comandi della Sezione Struttura

Attraverso i comandi di questa Sezione si definiscono alcuni aspetti grafici del Blog.

Nel riquadro Generale sono disponibili le seguenti opzioni:

§Visualizzazione Articoli: definisce come devono essere visualizzati gli Articoli nella pagina iniziale del Blog. È possibile fare in modo che solo il primo Articolo venga visualizzato esteso e tutti gli altri ridotti, che siano tutti estesi o che siano tutti ridotti. Gli Articoli visualizzati in forma ridotta presentano solo una descrizione breve a cui segue il link "Leggi tutto".

§Mostra pulsante 'AddThis' per la condivisione dei contenuti su Internet.: attivando questa opzione, sotto ogni Post del Blog viene automaticamente inserito il pulsante "AddThis". Cliccando su questo pulsante, il lettore visualizza un sotto-menu con un elenco dei più noti Social Network: se dispone di un profilo su uno di questi circuiti potrà selezionarlo e condividere il link al Post con la sua cerchia di contatti.

§Tipo pulsante: definisce l'aspetto del pulsante "AddThis" scegliendo fra le grafiche proposte dal menu a tendina.

§Account AddThis: se si dispone di un Account AddThis, permette di specificarlo. Avere un Account consente di visualizzare alcune statistiche sull'utilizzo fatto dai lettori del servizio AddThis.

Per maggiori informazioni sul servizio AddThis e per ottenere un Account, cliccare su pulsante [image] e accedere al Sito ufficiale: www.addthis.com.

Nel riquadro Blocchi laterali sono disponibili, invece, una Tabella riassuntiva che riporta il Titolo, il Tipo e la Larghezza di tutti i Blocchi di contenuto inseriti nella barra laterale e i comandi necessari per creare l'elenco di tali Blocchi:

§Aggiungi...: richiama la finestra Blocco laterale per procedere all'inserimento di un nuovo Blocco.

§Duplica: crea una copia del Blocco selezionato fra quelli già inseriti.

§Rimuovi: elimina il Blocco selezionato fra quelli presenti nell'elenco Blocchi laterali.

§Sposta Sopra / Sposta Sotto: agiscono sull'ordine di visualizzazione dei Blocchi già inseriti nell'elenco Blocchi laterali, spostando verso l'alto o verso il basso quello selezionato.

§Modifica...: richiama la finestra Blocco laterale per modificare il Blocco selezionato fra quelli presenti nell'elenco Blocchi laterali.
Clicca per espandere/ridurre Reference: I comandi della Sezione Commenti

Attraverso i comandi di questa Sezione si gestisce l'inserimento dei commenti lasciati dai Visitatori come feedback agli Articoli pubblicati nel Blog.

Innanzitutto occorre attivare l'opzione Consenti l'inserimento dei Commenti per gli Articoli del Blog per permette ai Visitatori di lasciare dei commenti agli Articoli pubblicati nel Blog.

Fatto questo, occorre specificare il Tipo di contenuto scegliendo tra:

Commento e Votazione: i Visitatori potranno lasciare un commento scritto e, in più, esprimere un voto.

Commento: i Visitatori potranno lasciare un commento ma non votare.

Votazione: i Visitatori potranno votare ma senza lasciare alcun commento.

Le opzioni disponibili nella sezione Impostazione Commenti sono:

§Metodo di visualizzazione: definisce se i commenti lasciati dai Visitatori possono essere visualizzati subito online, oppure se devono prima essere approvati attraverso i comandi del Pannello di Controllo online.

§Ordine di visualizzazione: definisce in quale ordine cronologico devono essere visualizzati i commenti pubblicati, se dal più recente al più vecchio o viceversa.

§Mostra pulsante 'Abuso': fa in modo che venga a messo a disposizione dei Visitatori il pulsante "Abuso" attraverso il quale possono segnalare eventuali comportamenti scorretti.

§Attiva controllo anti-spam 'Captcha': aggiunge il controllo anti-spam del Captcha al termine della form per l'inserimento di un commento. In pratica, viene inserita l'immagine di alcune lettere visualizzate in maniera distorta su uno sfondo confuso: il Visitatore deve ricopiare correttamente le lettere in un apposito Campo al fine di poter inviare il commento.

§Stile Votazione: definisce lo stile dell'elemento grafico (per esempio, una serie di 5 stelline) proposto al Visitatore per permettergli di votare. Questa è l'unica opzione disponibile se si seleziona Votazione come Tipo di contenuto.

Nelle sezione Salvataggio dei dati è possibile specificare come i dati raccolti attraverso il Modulo da compilare per pubblicare un commento devono essere salvati e inviati al gestore del Sito:

§Sottocartella su Server dove salvare i dati: specifica in quale sottocartella, all'interno della cartella su Server con accesso in scrittura tramite PHP, devono essere salvati i dati. La cartella su Server principale è quella già specificata tramite l'opzione Cartella su Server con accesso in scrittura presente nella finestra Gestione Dati. Se non viene specificata alcuna sottocartella, i dati vengono salvati direttamente nella cartella su Server principale.

§Invia una e-mail di notifica ricezione di un commento: fa in modo che venga inviata automaticamente una e-mail di notifica quando vengono ricevuti nuovi dati.

§E-mail destinatario: specifica l'indirizzo a cui deve essere inviata l'e-mail di notifica di ricezione dei dati.

Normalmente i Provider permettono l'accesso in scrittura per ogni cartella del Server: in questi casi non è necessario specificare alcun percorso per la cartella pubblica. Al contrario, per conoscere il percorso completo della cartella pubblica è necessario contattare il proprio Provider dello spazio Web.

Attraverso la sezione WebSite Test del Pannello di Controllo online è possibile verificare se la cartella con accesso in scrittura specificata, e le eventuali sottocartelle in essa presenti, esistono e, in caso positivo, se permettono effettivamente la scrittura dei dati.

Creando un Blog, viene automaticamente visualizzata sulla Mappa la Pagina Speciale "Blog": è possibile selezionarla e richiamare la finestra Proprietà Pagina per definirne le proprietà principali.

Best practice:

-

Come gestire i commenti di Blog e Guestbook dal Pannello di Controllo online

Approfondimenti:

- | Blog: caratteristiche e funzionamento
- | Pannello di Controllo online


blog_imp_articolo

Blog | Impostazioni Articolo

Passo 4 - Impostazioni Avanzate > Blog >

Blog | Impostazioni Articolo

 Return to chapter overview
Mostra/Nascondi testo nascosto

La finestra Impostazioni Articolo, richiamata dal comando Aggiungi... o dal comando Modifica... presenti nella finestra Blog | Articoli, consente di creare i modificare un Articolo del Blog.

Questa finestra presenta due sezioni è articolata nelle seguenti sezioni: Base e Esperto.

Clicca per espandere/ridurre Reference: I comandi della Sezione Base

I comandi presenti in questa sezione sono:

§Titolo: specifica il titolo dell'Articolo.

§Data di pubblicazione: imposta la data di pubblicazione dell'Articolo selezionandola attraverso un apposito calendario.

§Autore: specifica l'Autore dell'Articolo digitandolo direttamente nel campo, oppure selezionando un nominativo fra quelli già inseriti in precedenza dalla lista a discesa.

§Categoria: specifica la Categoria in cui rientra l'Articolo. Come per il campo Autore, è possibile digitare il nome di una nuova Categoria, o selezionare una delle Categorie già inserite in precedenza.

§Tag: specifica una lista di Tag, ovvero di brevi descrizioni dei concetti chiave associati all'Articolo. È possibile associare più di un Tag per ciascun Articolo, scrivendoli uno dopo l'altro, separati da una virgola (per esempio: "tag1, tag2, tag3, ...").

§Contenuto: permette di comporre l'Articolo attraverso un editor analogo a quello disponibile per l'Oggetto Testo.

§Descrizione breve: specifica una breve descrizione da associare all'Articolo.
Clicca per espandere/ridurre Reference: I comandi della Sezione Esperto

I comandi presenti in questa sezione sono:

§Audio/Video collegato: specifica un file audio (in formato .MP3, .WMA, .WAV, .MID, .AIF, .M4A) o un file video (in formato .MP4, .FLV, .AVI, .WMV, .MPG, .MOV) da associare all'Articolo. Utilizzando questa opzione, viene automaticamente creato un link al file audio/video visualizzato in calce all'Articolo.

È possibile fare in modo che il video venga visualizzato direttamente all'interno di un Articolo, inserendo manualmente il codice HTML necessario nell'editor di testo durante la composizione del post stesso.

Per esempio, è possibile copiare il codice di un Video YouTube™ così come viene fornito dal portale e incollarlo all'interno del post.

§Fonti Articolo: compone l'elenco delle fonti utilizzate per scrivere l'Articolo attraverso i seguenti comandi:

-Aggiungi... / Rimuovi: aggiungono una nuova fonte o eliminano quella selezionata.

-Sposta Sopra / Sposta sotto: agiscono sull'ordine di visualizzazione delle fonti già inserite, spostando verso l'alto o verso il basso quella selezionata.

-Modifica: modifica la voce selezionata. È anche possibile cliccare una seconda volta su una voce già selezionata per poterla modificare. Per inserire correttamente una fonte occorre scrivere il nome del Sito seguito dalla URL inclusa tra i caratteri < > (per esempio: "WebSite X5 <http://www.websitex5.com>"): come fonte verrà visualizzato solo il testo e la URL verrà utilizzata per creare il link associato ad esso.

§Non abilitare i commenti per questo Articolo: attivando questa opzione si impedisce ai Visitatori di lasciare dei commenti per l'Articolo corrente.

Best practice:

-

Come gestire i commenti di Blog e Guestbook dal Pannello di Controllo online

Approfondimenti:

- | Blog: caratteristiche e funzionamento
- | Pannello di Controllo online


blog_blocchi_laterali

Blog | Blocco laterale

Passo 4 - Impostazioni Avanzate > Blog >

Blog | Blocco laterale

 Return to chapter overview
Mostra/Nascondi testo nascosto

La finestra Blocco laterale, richiamata dal comando Aggiungi e dal comando Modifica presente nella finestra Blog | Struttura, consente di procedere effettivamente alla definizione dei Blocchi di contenuto che si vogliono rendere disponibili nella colonna laterale di tutte le Pagine del Blog.

Questa finestra presenta le seguenti sezioni: Generale e Stile.

Clicca per espandere/ridurre Reference: I comandi della Sezione Generale

Attraverso i comandi presenti in questa Sezione si crea la lista dei Blocchi che dovranno completare la Pagina del Blog.

I tipi di Blocco fra cui è possibile scegliere sono:

Articoli recenti: Blocco in cui vengono visualizzati tutti i Post più recenti pubblicati sul Blog. Cliccando sul titolo si accede alla Pagina dove è possibile leggere l'Articolo.

Categorie: Blocco in cui viene visualizzato l'elenco di tutte le Categorie in cui sono organizzati i Post del Blog. Cliccando su una Categoria si visualizza l'elenco degli Articoli inseriti.

Articoli per mese: Blocco in cui è riportato l'elenco dei Post pubblicati, organizzati per mese.

Nuvole: Blocco in cui è riportato l'elenco di tutte le Categorie o di tutti i Tag associati agli Articoli pubblicati. In questo caso i nomi delle Categorie o i Tag vengono visualizzati con dimensioni diverse a seconda del numero di Post collegati: maggiore è il numero dei Post collegati, maggiori sono le dimensioni della scritta. Cliccando su una voce (Categoria o Tag) si visualizza l'elenco degli Articoli ad essa correlati.

Siti amici: Blocco per la visualizzazione dell'elenco dei Siti Amici, ovvero di altri Siti Web o Blog che si desidera collegare per suggerirne la visita ai propri lettori.

Facebook: Blocco che sfrutta la Social Plug-in "Like Box" di Facebook per permettere agli utenti di:

§vedere a quante persone e/o a quanti dei loro amici piace la Pagina Facebook proposta;

§leggere i Post recenti pubblicati sulla Pagina Facebook proposta;

§dire che la Pagina Facebook proposta piace senza doverla per forza visitare.

Pubblicità Google AdSense: Blocco per la visualizzazione dei messaggi pubblicitari forniti dal circuito Google AdSense™.

Codice HTML: Blocco completamente personalizzabile che può essere utilizzato per inserire qualsiasi funzione non prevista in automatico dal Programma.

A seconda del tipo di Blocco selezionato, vengono presentate diverse opzioni sulle quali è possibile agire.

Le opzioni comuni a tutti i Blocchi sono:

§Titolo: specifica il titolo da associare e visualizzare per il Blocco.

§Larghezza: specifica la larghezza in pixel del Blocco.

Oltre a quelle comuni, per ciascun tipo di Blocco si aggiungono le seguenti opzioni specifiche:

Articoli recenti / Categorie /

Articoli per mese:

§Numero massimo di voci: specifica il numero massimo di voci che deve essere visualizzato all'interno del Blocco.

Nuvole:

§Mostra Nuvole con le Categorie / Mostra Nuvole con i Tag: specifica se nel Blocco Nuvole devono essere riportate le Categorie oppure i Tag utilizzati per gli Articoli già pubblicati.

Siti amici:

§Elenco Siti Amici: permette di comporre l'elenco dei Siti Amici attraverso i seguenti comandi:

-Aggiungi / Rimuovi: aggiungono un nuovo Sito Amico o ne eliminano uno selezionato.

-Sposta Sopra / Sposta sotto: agiscono sull'ordine di visualizzazione dei Siti Amici già inseriti, spostando verso l'alto o verso il basso quello selezionato.

-Modifica: modifica la voce selezionata. È anche possibile cliccare una seconda volta su una voce già selezionata per poterla modificare.

Per inserire correttamente un Sito Amico occorre scrivere il nome del Sito seguito dalla URL inclusa tra i caratteri < > (per esempio: "WebSite X5 <http://www.websitex5.com>"): come Sito Amico verrà visualizzato solo il testo e la URL verrà utilizzata per creare il link associato ad esso.

Facebook:

§Facebook URL: specifica la URL della Pagina Facebook che si vuole proporre.

§Colore Sfondo: imposta uno Sfondo Chiaro o Scuro per il Blocco.

§Altezza: definisce l'altezza in pixel del Blocco.

§Mostra Foto Amici: attivando questa opzione, nel Blocco vengono visualizzate anche le foto dei profili degli amici (ovvero delle connessioni).

§Mostra ultimi post: attivando questa opzione, nel Blocco vengono automaticamente visualizzati gli ultimi Post pubblicati nella Bacheca della Pagina Facebook proposta.

§Mostra intestazione Facebook: attivando questa opzione, nel Blocco viene visualizzata un'intestazione di Facebook.

Pubblicità Google AdSense:

§Codice HTML Google AdSense: campo in cui copiate il codice HTML fornito da Google AdSense™ per la visualizzazione di un blocco di messaggi pubblicitari.

Codice HTML:

§Codice HTML: campo in cui digitare o copiare del codice HTML in modo da creare un Blocco completamente personalizzato.
Clicca per espandere/ridurre Reference: I comandi della Sezione Stile

Attraverso i comandi presenti in questa Sezione si definisce l'aspetto grafico dei Blocchi di contenuto che completano la Pagina del Blog.

Le opzioni presenti nel riquadro Testo sono:

§Tipo di Font: specifica il Tipo di carattere, lo Stile e le dimensioni del testo.

§Colore Testo: specifica il colore che deve essere utilizzato per il testo.

§Margine: imposta il valore in pixel per il margine, ovvero lo spazio tra il bordo del Blocco e il testo contenuto.

Nel riquadro Sfondo, invece, sono disponibili le seguenti opzioni:

§Colore Sfondo: specifica il colore da utilizzare come riempimento dello sfondo.

§File Immagine: seleziona il file grafico (.JPG, .GIF, .PNG.) relativo all'immagine da utilizzare come sfondo.

§Disposizione: specifica se l'immagine inserita come sfondo deve essere ripetuta o meno. L'Immagine può essere ripetuta solo in senso orizzontale, solo in senso verticale o in entrambe i sensi, in modo da giungere ad occupare l'intero spazio a disposizione. In più, è possibile fare in modo che l'immagine venga adattata, ovvero ridimensionata in modo da coprire tutto lo sfondo.

§Allineamento: specifica come deve essere allineata l'immagine inserita come sfondo rispetto al Blocco.

Infine, nel riquadro Bordo, invece, sono disponibili le seguenti opzioni:

§Spessore: specifica lo spessore dei bordi, anche singolarmente.

§Colore: specifica il colore dei bordi, anche singolarmente.

§Smusso: definisce il fattore di smusso per gli angoli, anche singolarmente.

§Ombra: applica un'ombra, definendone il colore, la posizione, la diffusione e la dimensione.

Best practice:

-

Come gestire i commenti di Blog e Guestbook dal Pannello di Controllo online

Approfondimenti:

- | Blog: caratteristiche e funzionamento
- | Pannello di Controllo online


Feed RSS

Passo 4 - Impostazioni Avanzate >

Feed RSS

 Return to chapter overview
Mostra/Nascondi testo nascosto

Questa finestra propone gli strumenti e le opzioni necessarie per procedere alla creazione di un Feed RSS, uno dei formati più popolari per la distribuzione di contenuti Web.

Il Feed RSS è uno strumento molto versatile che si presta per divulgare notizie, immagini o video: può essere utilmente impiegato quando si hanno molte notizie da proporre con una certa frequenza, oppure quando si vogliono segnalare degli avvenimenti, gli aggiornamenti effettuati all'interno di un Sito, i nuovi Post o i commenti pubblicati su un Blog.

Sottoscrivendo il Feed RSS associato al Sito Web, i Visitatori potranno rimanere costantemente aggiornati e ricevere/leggere le notizie direttamente attraverso il loro programma news aggregator.

Clicca per espandere/ridurre Reference: I comandi per impostare un Feed RSS

Per creare un Feed RSS è sufficiente impostare alcuni parametri generali e creare l'elenco delle notizie che si vogliono distribuire.

Nel riquadro Elenco Articoli sono disponibili una Tabella riassuntiva che riporta il Titolo e la Data di rilascio di tutte le notizie già inserite e i comandi necessari per creare l'elenco degli Articoli:

§Aggiungi...: richiama la finestra Impostazioni Articolo per procedere all'inserimento di un nuovo Articolo.

§Rimuovi: elimina l'Articolo selezionato fra quelli presenti nell'Elenco Articoli.

§Modifica...: richiama la finestra Impostazioni Articolo per modificare l'articolo selezionato fra quelli presenti nell'Elenco Articoli.

Oltre a creare la lista delle notizie, è necessario definire i seguenti parametri inclusi nel riquadro Impostazioni Generali:

§Titolo: (parametro obbligatorio) specifica il titolo del Feed RSS collegato al sito Web.

§Immagine: specifica un'Immagine (file in formato .JPG, .GIF, .PNG) da associare al Feed RSS; questa Immagine (tipicamente il logo dell'azienda o del Sito Web) verrà visualizzata dal programma news aggregator.

§Descrizione: (parametro obbligatorio) specifica una descrizione del Feed RSS collegato al sito Web.

Quando si testa il funzionamento del Sito creato in locale, una finestra d'avviso avverte che i Feed RSS saranno visualizzati solo una volta che il Sito sarà pubblicato online.

Approfondimenti:

-

Feed RSS: definizione ed usi


feed_rss_imp_articolo

Feed RSS | Impostazioni Articolo

Passo 4 - Impostazioni Avanzate > Feed RSS >

Feed RSS | Impostazioni Articolo

 Return to chapter overview

La finestra Impostazioni Articolo, richiamata dal comando Aggiungi... o dal comando Modifica... presenti nella finestra Feed RSS, consente di creare i modificare un Articolo del Feed RSS.

§Titolo: specifica il titolo dell'Articolo.

§Data di pubblicazione: imposta la data di pubblicazione dell'Articolo selezionandola attraverso un apposito calendario.

§Contenuto: permette di comporre l'Articolo attraverso un editor analogo a quello disponibile per l'Oggetto Testo.

§Pagina collegata: permette di accedere alla Mappa del Sito per definire quale Pagina deve essere collegata all'Articolo.

Approfondimenti:

-

Feed RSS: definizione ed usi


gestione_dati

Passo 4 - Impostazioni Avanzate >

Gestione Dati

 Return to chapter overview
Mostra/Nascondi testo nascosto

In questa finestra si impostano i metodi di gestione dei dati raccolti attraverso elementi del Sito Web come i Moduli di Invio E-mail, il Blog, il Guestbook.

Attraverso i comandi della sezione Database è possibile creare la lista dei Database collegati al Progetto del Sito Web a cui si sta lavorando, in modo da poterli gestire in maniera più agevole. Tutti i Database inseriti vengono visualizzati all'interno di una tabella riassuntiva che, per ciascuno di essi, riporta Descrizione, Nome Database, Nome Host e Username.

Clicca per espandere/ridurre Reference: I comandi per comporre la lista dei Database

I comandi per comporre la lista dei Database collegati al Progetto corrente sono:

§Aggiungi...: richiama la finestra Impostazioni Database per procedere all'inserimento di un nuovo Database.

§Rimuovi: rimuove il Database selezionato dalla lista.

§Modifica...: richiama la finestra Impostazioni Database per modificare i dati del Database selezionato. È possibile procedere a tale modifica anche tramite doppio click sul Database.

È necessario creare la lista dei Database collegati al Progetto prima di poter utilizzare un Database per l'invio dei dati raccolti con un Oggetto Modulo Invio E-mail.
Clicca per espandere/ridurre Reference: Le opzioni per l'invio delle e-mail e il salvataggio su Server

Tramite le opzioni della sezione Invio E-mail è possibile intervenire sui metodi utilizzati per effettuare l'invio delle e-mail:

§Script per l'invio delle e-mail: imposta lo script che deve essere utilizzato per l'invio delle e-mail gestito da WebSite X5 in relazione, per esempio, all'utilizzo dell'Oggetto Modulo Invio E-mail o alla creazione di un Carrello e-commerce. Di default viene utilizzato lo Script completo: nel caso tale script non funzioni a causa delle configurazioni del Server impiegato, è consigliabile provare a sostituirlo e ad impostare le opzioni Server di bassa qualità o Script a basso livello.

§Metodo di invio dei dati dei Moduli e-mail: imposta il metodo di invio dei dati che deve essere utilizzato per l'invio dei dati dell'Oggetto Modulo Invio E-mail. Di default viene utilizzato il metodo POST ma, dal momento che alcuni Server potrebbero non essere adeguatamente impostati per supportarlo, è possibile scegliere di utilizzare il metodo GET.

Com'è noto il protocollo HTTP (Hypertext Transfer Protocol) è quello utilizzato come principale sistema per la trasmissione di informazioni sul Web. Questo protocollo funziona in base a un meccanismo di richiesta/risposta in cui il Client esegue una richiesta e il Server restituisce una risposta. In genere, il Client corrisponde al Browser e il Server al Sito Web.

I messaggi HTTP di richiesta/risposta hanno, ovviamente, una loro sintassi. In particolare, nei messaggi di richiesta è necessario specificare un metodo e, fra quelli disponibili, i più comuni sono GET e POST.

Il metodo GET è usato per ottenere il contenuto della risorsa indicata come oggetto della richiesta (ad esempio la pagina web che si intende avere).

Il metodo POST, invece, è usato di norma per inviare informazioni al Server (ad esempio i dati di una form).

Dunque, per il caso specifico delle form e-mail è più corretto utilizzare il metodo POST ma, dal momento che può non essere supportato dal Server, WebSite X5 permette di sfruttare in sostituzione il metodo GET.

Infine, è possibile impostare la Cartella di accesso in scrittura:

§Cartella su Server con accesso in scrittura: in questo campo è necessario specificare il percorso su Server della cartella con accesso in scrittura, ovvero della cartella all'interno della quale è abilitata la scrittura da parte del codice PHP.

Normalmente i Provider permettono l'accesso in scrittura per ogni cartella del Server: in questi casi non è necessario specificare alcun percorso per la cartella pubblica. Al contrario, per conoscere il percorso completo della cartella pubblica è necessario contattare il proprio Provider dello spazio Web.

Attraverso la sezione WebSite Test del Pannello di Controllo online è possibile verificare se la cartella con accesso in scrittura specificata, e le eventuali sottocartelle in essa presenti, esistono e, in caso positivo, se permettono effettivamente la scrittura dei dati.


impostazioni_database

Passo 4 - Impostazioni Avanzate > Gestione Dati >

Impostazioni Database

 Return to chapter overview

Questa finestra, richiamata dal comando Aggiungi... presente nella finestra Gestione Dati, permette di definire le impostazioni relative a un nuovo Database collegato al Progetto in corso.

Le Impostazioni Database che occorre definire sono:

§Descrizione: è un nome che può essere assegnato liberamente al Database in modo da poterlo identificare con maggiore semplicità.

§Nome Host: è l'indirizzo URL del Server MySQL su cui risiede il Database online che si vuole utilizzare. Nella maggior parte dei casi il Database risiede sullo stesso Server che ospita anche il sito Web a cui è collegato e quindi può essere individuato con l'espressione "localhost". In qualsiasi caso è bene verificare il dato con il proprio Provider.

§Nome Database: in questo campo si deve inserire il nome del Database su cui si vuole lavorare (dato fornito dal Provider).

§Username: in questo campo si deve inserire la Username stabilita per poter accedere al proprio Database online (dato fornito dal Provider).

§Password: in questo campo si deve inserire la Password stabilita per poter accedere al proprio Database online (dato fornito dal Provider).


Gestione Accessi

Passo 4 - Impostazioni Avanzate >

Gestione Accessi

 Return to chapter overview
Mostra/Nascondi testo nascosto

Questa finestra presenta i comandi attraverso i quali è possibile procedere alla creazione e gestione dei profili Utente che possono avere accesso all'Area Riservata del Sito, ovvero alle Pagine che durante la fase di Creazione della Mappa sono state definite Protette.

Clicca per espandere/ridurre Reference: I comandi per creare i Profili Utente

Nel riquadro Elenco Utenti e Gruppi con accesso alle Pagine Protette è disponibile una Tabella riassuntiva che riporta i Gruppi/Utenti già inseriti oltre che la Username e le Note assegnate a ciascun Utente.

A fianco della Tabella sono presenti i comandi utili per procedere alla creazione della lista dei Gruppi e degli Utenti ai quali si vuole consentire l'accesso alle Pagine Protette del Sito:

§Nuovo Gruppo: crea un nuovo Gruppo, in modo da poter organizzare gli Utenti in categorie omogenee più semplici da gestire. I Gruppi non hanno impostazioni particolari: sono semplici "contenitori" e per questo vengono inseriti direttamente nella Tabella riassuntiva. È sufficiente fare doppio click in corrispondenza di un Gruppo già inserito per poterlo rinominare.

Sempre al fine di organizzare al meglio gli accessi da parte degli Utenti, è anche possibile creare dei sotto-Gruppi: non ci sono limiti particolari al numero di Gruppi o di sotto-Gruppi utilizzabili.

Di default sono presenti due Gruppi: Amministratori e Utenti. Il Gruppo Amministratori è quello formato dagli amministratori del Sito che hanno automaticamente accesso a tutte le Pagine Protette del Sito.

Tramite la loro Login e Password, tutti gli Utenti del Gruppo Amministratori possono accedere al Pannello di Controllo online (disponibile alla URL http://www.miosito.it/admin dove http://www.miosito.it è la URL del Sito) tramite il quale è possibile gestire i commenti ai Post del Blog, i messaggi del Guestbook e visualizzare informazioni di diagnostica.

§Nuovo Utente: richiama la finestra Impostazioni Utente per procedere all'inserimento di un nuovo Utente, con le relative credenziali di accesso, all'interno del Gruppo selezionato.

§Crea Alias: crea un Alias per l'Utente selezionato. Questa opzione è utile quando uno stesso Utente deve essere inserito in Gruppi diversi per avere accesso a diverse Pagine Protette e, per questo motivo, non è attiva per gli Utenti del Gruppo Amministratori (che hanno automaticamente accesso a tutte le Pagine Protette). L'Alias rimane collegato all'Utente cosicché qualsiasi modifica apportata a uno viene automaticamente applicata anche all'altro. Un modo alternativo e veloce di creare un Alias è selezionare un Utente, trascinarlo e, prima di rilasciarlo all'interno di un secondo Gruppo, premere il tasto CTRL.

§Rimuovi: elimina il Gruppo o l'Utente selezionato fra quelli già inseriti. Non è possibile rimuovere il Gruppo Amministratori né l'Utente Admin in esso inserito, previsti di default.

§Modifica...: richiama la finestra Impostazioni Utente per modificare le impostazioni dell'Utente selezionato.

Dopo aver creato gli Utenti con le relative credenziali di accesso e averli organizzati in Gruppi è possibile tornare al Passo 2 - Creazione della Mappa per definire le Pagine che devono essere Protette e stabilire da quali Gruppi/Utenti ciascuna Pagina Protetta potrà essere visualizzata.
Clicca per espandere/ridurre Reference: Le opzioni per gestire l'accesso

Oltre alla Tabella riassuntiva, nel riquadro Impostazioni della Pagina di richiesta Login e Password sono disponibili le seguenti opzioni:

§Testo di benvenuto: permette di comporre il testo che deve essere visualizzato quanto un Visitatore cerca di accedere a una Pagina Protetta senza aver prima eseguito il login. In questi casi, il Visitatore viene re-indirizzato a una Pagina, creata automaticamente dal Programma, che si compone dei seguenti elementi:

-il testo di benvenuto qui specificato;

-i campi in cui si richiede di inserire Username e Password;

-nel caso venga specificata la Pagina per la richiesta di registrazione (vedere opzione successiva), il pulsante Registrati.

§Pagina per la richiesta di registrazione: permette di accedere alla Mappa del Sito per specificare quale Pagina deve essere visualizzata quando il Visitatore clicca sul collegamento Registrati per richiedere Username e Password necessarie per accedere alle Pagine Protette.

Impostando anche solo una Pagina come Protetta (dunque attivando un'Area Riservata), viene automaticamente visualizzata sulla Mappa la Pagina Speciale "Pagina di Login": è possibile selezionarla e richiamare la finestra Proprietà Pagina per definirne le proprietà principali.

Quando si testa in locale il funzionamento del Sito creato, una finestra d'avviso avverte che le Pagine Protette vengono visualizzate senza la richiesta di accesso. L'Area Riservata viene attivata solo con la pubblicazione del Sito su Server.

Per il corretto funzionamento dell'Area Riservata è necessario che il Server sul quale il Sito verrà pubblicato supporti il linguaggio di programmazione PHP e le sessioni. Attraverso la sezione WebSite Test del Pannello di Controllo online è possibile avere queste informazioni di diagnostica sul Server.

Best practice:

-

Come gestire gli accessi e creare un'Area Riservata

Approfondimenti:

-

Il Pannello di Controllo online


impostazioni_utente

Passo 4 - Impostazioni Avanzate > Gestione Accessi >

Impostazioni Utente

 Return to chapter overview

La finestra Impostazioni Utente, richiamata dal comando Nuovo Utente o dal comando Modifica... della finestra Gestione Accessi, permette di impostare le credenziali di accesso per un nuovo Utente.

I comandi disponibili per creare un nuovo Utente sono:

§Nome e Cognome: specifica il nome dell'Utente di cui si vogliono abilitare le credenziali per permettergli l'accesso a determinate Pagine Protette del Sito.

§Username / Password: specificano la Username e la Password che l'Utente dovrà utilizzare per poter visualizzare le Pagine Protette per le quali gli viene abilitato l'accesso. In automatico viene proposta una Password composta da 8 caratteri (lettere e numeri) scelti con una procedura random: tale Password può, comunque, essere liberamente modificata.

§Pagina di ingresso: permette di accedere alla Mappa del Sito per specificare quale Pagina deve essere visualizzata dopo che l'Utente ha inserito le proprie credenziali di accesso.

§Note: permette di inserire alcune note facoltative sull'Utente.

§Data di registrazione: specifica, attraverso l'apposita finestra Calendario, la data in cui è avvenuta la registrazione dell'Utente.

Le informazioni relative alle opzioni Note e Data di registrazione non vengono incluse nel codice del Sito Web realizzato: servono unicamente per permettere una migliore gestione degli Utenti da parte dell'Amministratore del Sito.

Best practice:

-

Come gestire gli accessi e creare un'Area Riservata


Carrello e-commerce

Passo 4 - Impostazioni Avanzate >

Carrello e-commerce

 Return to chapter overview
Mostra/Nascondi testo nascosto

Questa finestra propone gli strumenti e le opzioni necessarie per procedere alla creazione e gestione di un carrello di e-commerce attraverso il quale effettuare la vendita online dei Prodotti offerti sul Sito Web.

Per creare un Carrello di e-commerce è necessario, innanzitutto, definire il catalogo dei Prodotti disponibili, organizzandoli in categorie e sotto-categorie omogenee. Ovviamente per ogni Prodotto occorre inserire una serie di informazioni indispensabili come il nome, la descrizione e il prezzo ma è anche possibile andare oltre, associando una o più immagini e prevedendo delle varianti (di taglia, di colore, di modello, ecc.). Creato il catalogo, occorre poi definire i metodi di spedizione e di pagamento che si vogliono attivare e impostare il modulo d'ordine configurando anche le e-mail che vengono inviate dal Carrello sia al gestore del Sito sia ai Clienti che fanno gli ordini.

Nello specifico, le diverse opzioni per definire gli elementi e il funzionamento del Carrello e-commerce sono presentate nelle seguenti sezioni: Prodotti, Gestione Ordine, Dati Cliente, Invio Ordine e Opzioni.

Clicca per espandere/ridurre Reference: I comandi della Sezione Prodotti

Attraverso i comandi di questa sezione si procede all'inserimento dei Prodotti nel Carrello, organizzandoli in Categorie.

Tutti i Prodotti già inseriti vengono visualizzati nella Tabella riassuntiva che nello specifico riporta, per le Categorie già previste, tutti i Prodotti inseriti con relativi Descrizione e Prezzo.

La Tabella riassuntiva presenta una Barra Strumenti superiore con i seguenti comandi:

Taglia [CTRL+X] - Copia [CTRL+C] - Incolla [CTRL+V]

Tagliano, copiano e incollano i Prodotti selezionati. Questi comandi sono presenti anche nel menu contestuale richiamato attraverso il click del tasto destro del mouse sull'elenco dei Prodotti.

Espandi / Contrai

Espandono e contraggono la Categoria selezionata in modo da visualizzare o meno i Prodotti in essa contenuti.

Importa Prodotti

Importa l'elenco dei Prodotti da inserire nel Carrello direttamente da un file esterno (in formato .TXT o .CSV da Microsoft Excel).

Esporta Prodotti

Esporta il catalogo dei Prodotti in un file .TXT o .CSV.

Per maggiori informazioni sulle funzioni Importa Prodotti/Esporta Prodotti e su come creare e gestire i file con il catalogo dei Prodotti vedere: Come importare/esportare i Prodotti del Carrello.

Oltre alla Barra Strumenti, per definire l'elenco ordinato dei Prodotti da gestire attraverso il Carrello online sono disponibili i seguenti comandi:

§Nuova Categoria: inserisce una nuova Categoria in cui organizzare i Prodotti disponibili. Le Categorie non hanno impostazioni particolari: sono semplici "contenitori" e per questo vengono inseriti direttamente nella Tabella riassuntiva. È sufficiente fare doppio click in corrispondenza di una Categoria già inserita per poterla rinominare.

Sempre al fine di organizzare al meglio il catalogo dei Prodotti, è anche possibile creare delle sotto-Categorie: non ci sono limiti particolari al numero di Categorie o di sotto-Categorie utilizzabili.

§Nuovo Prodotto: richiama la finestra Impostazioni Prodotto per procedere all'inserimento di un nuovo Prodotto all'interno della Categoria selezionata.

§Rimuovi: elimina la Categoria selezionata, con tutti i Prodotti inserti, o i singoli Prodotti selezionati.

§Modifica...: richiama la finestra Impostazioni Prodotto per modificare le impostazioni del Prodotto selezionato.

Per spostare un Prodotto da una Categoria all'altra è possibile agire direttamente sull'elenco dei Prodotti: è sufficiente selezionarlo, trascinarlo e rilasciarlo nella posizione che deve assumere (Drag&Drop). È possibile selezionare più Prodotti utilizzando i tasti CTRL e SHIFT.

Solo dopo aver inserito le Categorie e i relativi Prodotti all'interno del Carrello e-commerce sarà possibile utilizzare l'Oggetto Elenco Prodotti per creare un vero e proprio catalogo online.
Clicca per espandere/ridurre Reference: I comandi della Sezione Gestione Ordine

Attraverso i comandi di questa sezione si definiscono i metodi di spedizione e di pagamento che si vogliono rendere disponibili per il Carrello.

Nel riquadro Elenco dei metodi di Spedizione viene proposta la lista di tutti i metodi di spedizione introdotti, riportando per ciascuno di essi il Nome, la Descrizione e il Costo associati.

I comandi disponibili per creare l'elenco dei metodi di spedizione attivi per il Carrello sono:

§Aggiungi...: richiama la finestra Metodo di Spedizione per procedere alla definizione di un nuovo metodo di spedizione.

§Duplica: crea una copia del metodo di spedizione selezionato in modo da poter procedere più velocemente alla definizione di un altro metodo che si intende rendere disponibile.

§Rimuovi: elimina il metodo di spedizione selezionato.

§Sposta Sopra / Sposta Sotto: agiscono sull'ordine di visualizzazione dei metodi di spedizione già inseriti, spostando verso l'alto o verso il basso quello selezionato.

§Modifica...: richiama la finestra Metodo di Spedizione per modificare il metodo di spedizione selezionato. È possibile procedere a tale modifica anche tramite doppio click sul metodo.

Analogamente, nel riquadro Elenco dei metodi di Pagamento viene riportata la lista di tutti metodi di pagamento messi a disposizione sul Carrello e per ciascuno di essi viene riportato il Nome, la Descrizione e il Costo associati.

I comandi disponibili per creare l'elenco dei metodi di pagamento sono gli stessi di quelli già visti per i metodi di spedizione ma i pulsanti Aggiungi... e Modifica... richiamano la finestra Metodo di Pagamento.
Clicca per espandere/ridurre Reference: I comandi della Sezione Dati Cliente

Attraverso i comandi di questa sezione si compone il modulo che il Cliente deve compilare per procedere all'ordine tramite il Carrello.

Nel riquadro Modulo d'Ordine viene proposto un Elenco Campi con la lista dei campi che possono essere utilizzati per comporre il modulo d'ordine: sono presente sia dei campi Predefiniti che dei campi Personali e per ogni campo viene specificato se è stato reso Visibile e/o Obbligatorio.

I comandi della pulsantiera presente sopra all'Elenco Campi consentono di:

Aggiungi nuovo campo personale

Aggiunge al modulo un nuovo campo, inserendolo fra quelli Personali.

Rimuovi campo

Rimuove dal modulo il campo selezionato. Non è possibile eliminare i campi Predefiniti.

Rinomina campo

Modifica il nome del campo selezionato. Non è possibile rinominare i campi Predefiniti.

Sposta sopra / Sposta sotto

Agiscono sull'ordine di visualizzazione dei campi già inseriti, spostando verso l'alto o verso il basso quello selezionato. È possibile modificare l'ordine sia dei campi Predefiniti che dei campi Personali ma non è possibile portare i campi Personali fra quelli Predefiniti o viceversa.

Campo visibile

Imposta in campo selezionato come Visibile o meno all'interno del modulo.

Campo obbligatorio

Imposta in campo selezionato come Obbligatorio o meno all'interno del modulo. Il Cliente è tenuto a compilare tutti i campi obbligatori per poter procedere con l'ordine.

La lista proposta di default prevede già tutti i campi generalmente utilizzati in un modulo di registrazione.

A differenza degli altri, il campo "Indirizzo di posta elettronica" non può essere nascosto né reso non obbligatorio dal momento che, per il corretto funzionamento del carrello, è necessario conoscere l'e-mail del Cliente che invia l'ordine.

Al fondo della tabella relativa all'Elenco Campi è disponibile l'opzione:

§Mostra modulo Dati di Spedizione: aggiunge automaticamente al modulo una sezione con i campi necessari per raccogliere i dati di spedizione, nel caso in cui questi siano diversi da quelli di fatturazione.

Oltre ai campi necessari per raccogliere i dati per la fatturazione e la spedizione dei Prodotti, per Legge i moduli d'ordine devono presentare anche le condizioni di vendita che regolano il funzionamento del Carrello in modo da permettere ai Clienti di prenderne visione e di accettarle in maniera esplicita.

Nella sezione Condizioni di Vendita è disponibile un editor di testo attraverso il quale è possibile comporre il Testo delle Condizioni di Vendita. Nell'editor è già riportata una frase standard su cui si possono inserire i collegamenti (attraverso il pulsante [image]) per aprire, per esempio, i file .PDF che spiegano le Policy sul Trattamento dei Dati e le Politiche di Rimborso. È comunque possibile scrivere un testo diverso, formulandolo nella maniera che si reputa più corretta.

Anche se in base alle normative vigenti è sufficienti che le Condizioni di Vendita vengano riportate subito prima del pulsante "Acquista" attraverso il quale viene inoltrato un ordine, è anche possibile attivare l'opzione:

§Richiedi l'accettazione delle Condizioni di Vendita: aggiunge al termine del modulo, subito prima del pulsante "Acquista", la richiesta di accettare esplicitamente le Condizioni di Vendita riportate, cliccando per far comparire il segno di spunta su un apposito check box.
Clicca per espandere/ridurre Reference: I comandi della Sezione Invio Ordine

Attraverso i comandi di questa sezione si definiscono le modalità relative all'invio dei dati raccolti attraverso il Modulo d'Ordine del Carrello online, oltre che i testi della e-mail di conferma ordine che viene inviata automaticamente al Cliente.

Nella sezione Invio Ordine è possibile specificare come i dati raccolti attraverso il Modulo d'ordine devono essere salvati e inviati al gestore del Sito:

§Indirizzo e-mail dove ricevere gli Ordini: specifica a quale indirizzo e-mail devono essere inviati i dati raccolti attraverso il Modulo creato. E' possibile specificare più di un indirizzo e-mail: per farlo occorre digitare tutti gli indirizzi e-mail separati da un punto e virgola (;).

§Allega Dati Ordine in formato CSV: fa in modo che i dati raccolti vengano salvati anche in un file di formato CSV, incluso in coda alla e-mail inviata. In un file CSV i dati vengono riportati in forma testuale, come un lungo elenco di voci separate da un punto e virgola (;): tali file possono essere agevolmente importati nei programmi per la gestione dei fogli di calcolo (per esempio, Microsoft Excel).

Infine, nel riquadro E-mail di conferma Ordine per il Cliente sono disponibili i campi attraverso i quali è possibile specificare il Testo di introduzione e il Testo di chiusura per l'e-mail di conferma Ordine che verrà automaticamente inviata al Cliente. In questa e-mail di conferma d'ordine, oltre al testo di introduzione e al testo di chiusura vengono proposte anche le descrizioni relative ai metodi di spedizione e pagamento scelti.
Clicca per espandere/ridurre Reference: I comandi della Sezione Opzioni

Attraverso i comandi di questa sezione si definiscono alcuni parametri grafici, oltre che relativi a valuta e IVA, per il Carrello di e-commerce.

Nel riquadro Impostazioni valuta vengono presentate le seguenti opzioni:

§Valuta: imposta la valuta da utilizzare nel Carrello. Il menu a comparsa propone già alcune valute: per modificare la composizione di tale lista di valute è sufficiente cliccare sul pulsante [image] per richiamare la finestra Elenco Valute.

§Raggruppamento cifre: definisce come devono essere scritti i prezzi dei Prodotti, scegliendo se le migliaia devono essere separate da un punto e i decimali da una virgola (1.000,00) o viceversa (1,000.00).

§Mostra valuta a destra: attivando questa opzione, il simbolo della valuta viene riportato a destra dei prezzi.

§Mostra cifre decimali: attivando questa opzione, i prezzi vengono riportati con due cifre dopo la virgola.

Nel riquadro Impostazioni IVA sono disponibili le seguenti opzioni:

Tipologia: definisce se per tutti i prezzi dei Prodotti riportati nel Carrello l'IVA non è presente, è già inclusa o non è inclusa.

Valore di default (%): imposta il valore dell'IVA che viene applicata di default per tutti i Prodotti del Carrello, ad eccezione di quelli per i quali è stata definita un'IVA particolare attraverso l'opzione IVA (%) presente nella finestra Impostazioni Prodotto | Generale.

Nel riquadro Opzioni vengono presentati i seguenti comandi:

§Consenti Ordine solo per importi minimi: fa in modo che l'ordine non venga accettato a meno che non venga raggiunto un importo minimo stabilito.

§Importo minimo totale: disponibile solo se viene attivata l'opzione Consenti Ordine solo per importi minimi, definisce il valore dell'importo minimo del totale dell'ordine che deve essere raggiunto perché questo venga accettato.Attraverso i comandi del riquadro Opzioni è possibile definire l'aspetto delle tabelle che riassumono i prodotti disponibili e/o inseriti nel carrello:

§Sfondo intestazione / Testo intestazione / Sfondo celle / Testo celle / Bordo tabella: definiscono il colore per i diversi elementi della Tabella Prodotti.

§Smussi tabella: definisce il fattore di smusso per gli angoli della Tabella Prodotti, anche singolarmente.

§Alterna colore delle righe: distingue le righe pari e le righe dispari della Tabella Prodotti applicando due colori di sfondo diversi, il colore impostato in Sfondo celle e un colore ricavato automaticamente rendendo più scuro il primo. Alternare il colore delle righe serve per aumentare la leggibilità della Tabella, soprattutto quando questa diventa lunga.

Attraverso i comandi del riquadro Immagini è possibile impostare alcune immagini utilizzate nelle pagine del carrello:

§Aggiungi al Carrello/ Rimuovi dal Carrello: specificano le immagini da utilizzare per creare i pulsanti "Aggiungi al carrello" e "Rimuovi dal carrello", ovvero i pulsanti che il Cliente può utilizzare per inserire o rimuovere dal Carrello un determinato Prodotto.

§Anteprima non disponibile: specifica l'immagine da utilizzare quando per un Prodotto non è stata specificata l'immagine associata (in Impostazioni Prodotto | Immagine) e in Oggetto Elenco Prodotti | Impostazioni è stata scelta come Tipo di visualizzazione la presentazione "Immagine e Testo" o "Testo e Immagine" per le schede.

Una volta creato il Carrello di e-commerce occorre inserire nel Sito le informazioni e i collegamenti necessari affinché i Clienti possano visualizzare le informazioni sui Prodotti ed effettuare l'acquisto. Per far questo è possibile procedere in diversi modi:

1.Creare delle Pagine specifiche in cui si presentano i Prodotti nel modo che si reputa più opportuno (con immagini, testi, tabelle, ecc.) e inserire in esse il pulsante "Acquista". In questo caso, il pulsante "Acquista" può essere creato attraverso il collegamento Aggiungi al Carrello (vedere, Collegamento).

2.Creare delle Pagine in cui si presentano i Prodotti attraverso apposite schede già complete del pulsante "Acquista". In questo caso occorre utilizzare l'Oggetto Elenco Prodotti.

Creando un carrello di e-commerce, viene automaticamente visualizzata sulla Mappa la Pagina Speciale "Carrello e-commerce": è possibile selezionarla e richiamare la finestra Proprietà Pagina per definirne le proprietà principali.

Quando si testa il funzionamento del Sito creato in locale, una finestra d'avviso avverte che l'ordine non verrà inviato e viene effettuato il redirect automatico alla Pagina di conferma dell'ordine. Il Carrello di e-commerce funziona pienamente solo con la pubblicazione del Sito su Server.

Per il corretto funzionamento del Carrello di e-commerce è necessario che il Server sul quale il Sito è pubblicato supporti il linguaggio PHP e che sia attivo il comando MAIL. Attraverso la sezione WebSite Test del Pannello di Controllo online è possibile avere queste informazioni di diagnostica sul Server.

Se si verificano dei problemi nell'invio delle e-mail è probabile che il Server utilizzato non sia configurato in modo standard. In questi casi è consigliabile provare a modificare le impostazioni relative allo script e al metodo utilizzati per l'invio delle e-mail attraverso le apposite opzioni presenti in Impostazioni Avanzate | Gestione Dati. Per ulteriori informazioni in merito, contattare il proprio Provider di spazio Web.

Best practice:

- | Come creare un Carrello di e-commerce
- | Come importare/esportare i Prodotti del Carrello
- | Come definire i contenuti della e-mail di conferma Ordine

Approfondimenti:

-

Il Pannello di Controllo online


carrello_prodotti_imp_prodotti

Carrello e-commerce | Finestra Impostazioni Prodotto

Passo 4 - Impostazioni Avanzate > Carrello e-commerce >

Carrello e-commerce | Finestra Impostazioni Prodotto

 Return to chapter overview
Mostra/Nascondi testo nascosto

La finestra Impostazioni Prodotto, richiamata dal comando Nuovo Prodotto o dal comando Modifica... presenti in Carrello e-commerce | Prodotti, permette di procedere alla definizione e all'inserimento di un nuovo Prodotto.

La finestra è organizzata nelle seguenti sezioni: Generale, Immagine, Opzioni, Sconto.

Clicca per espandere/ridurre Reference: I comandi della Sezione Generale

Attraverso i comandi di questa sezione si inseriscono alcune informazioni di base su un nuovo Prodotto da inserire nel Carrello e-commerce.

Le opzioni disponibili per definire il nuovo Prodotto da aggiungere all'elenco sono:

§Nome/Codice: assegna un nome o un codice identificativo al Prodotto corrente.

§Descrizione: associa una descrizione al Prodotto corrente.

§Prezzo: specifica il prezzo del Prodotto corrente.

§IVA (%): se attiva, specifica l'IVA da applicare per il Prodotto corrente. Questa opzione è disponibile solo se in Carrello e-commerce | Opzioni è stata scelta la Tipologia "IVA inclusa nel prezzo" o "IVA esclusa dal prezzo" per le Impostazioni IVA.

A seconda di come si vuole impostare il Carrello, è possibile inserire per i Prodotti i prezzi già comprensivi di IVA, oppure, soprattutto nel caso di articoli che richiedono l'applicazione di un'IVA diversa, è possibile inserire i prezzi IVA esclusa e poi specificare a parte quale imposta applicare caso per caso.

§Peso: specifica il Peso del Prodotto corrente al fine di poter calcolare le spese di spedizione da applicare (vedere, Finestra Metodo di Spedizione).

In base alla tipologia di Prodotti trattati sul Carrello è possibile utilizzare l'opzione Peso per specificare un peso in chilogrammi o in grammi, piuttosto che per introdurre un volume espresso in litri o in metri cubi, o in qualsiasi altra unità di misura utile. Perché i costi di spedizione vengano calcolati correttamente è importante, quindi, scegliere un'unità di misura e mantenerla inalterata per tutti i Prodotti del Carrello.

§Collegamento (es. Pagina scheda prodotto): specifica, attraverso la finestra Collegamento richiamata, il collegamento da associare al Prodotto corrente. Può essere impiegato, per esempio, per collegare la Pagina del Sito in cui viene presentato il Prodotto in maniera estesa.
Clicca per espandere/ridurre Reference: I comandi della Sezione Immagine

Attraverso i comandi di questa sezione si associa al Prodotto da proporre attraverso il Carrello e-commerce una o più immagini attraverso le quali presentarlo.

Importando più immagini è possibile creare un vero e proprio SlideShow: cliccando sulle singole immagini sarà anche possibile visualizzare le stesse ingrandite attraverso l'apposita finestra ShowBox.

Occorre precisare che solo la prima delle immagini associate al Prodotto verrà visualizzata nel Carrello. Tutte le altre immagini eventualmente inserite verranno, invece, visualizzate nelle schede composte se si utilizza l'Oggetto Elenco Prodotti.

Le opzioni disponibili per creare la lista di immagini da associare al Prodotto sono:

§Aggiungi... / Rimuovi: aggiungono nuove immagini o eliminano le immagini selezionate dalla lista di quelle che compongono lo SlideShow. La finestra di Selezione File richiamata consente di selezionare anche più file contemporaneamente.

§Sposta sopra / Sposta sotto: agiscono sull'ordine di visualizzazione delle immagini già inserite, spostando verso l'alto o verso il basso quella selezionata.

§Modifica...: richiama l'Editor Immagine per modificare l'immagine selezionata.

In più, nel riquadro Proprietà ShowBox sono disponibili le seguenti opzioni:

§Dimensioni massime: definisce i valori massimi che può assumere la finestra ShowBox in cui vengono visualizzate le immagini ingrandite. Lasciando attiva l'opzione Mantieni proporzioni, nell'impostazione delle dimensioni viene mantenuta inalterata la proporzione fra la larghezza e l'altezza.

§Effetto: definisce, attraverso la finestra Proprietà Effetto richiamata cliccando sul pulsante [image], l'effetto di transizione da applicare alle immagini visualizzate nella finestra ShowBox.

L'aspetto della finestra ShowBox può essere completamente personalizzato: attraverso le opzioni presenti nella sezione Stili e Modelli | E-mail del Passo 4 - Impostazioni Avanzate è, per esempio, possibile impostare colori, ombra, opacità ed effetti di apertura.
Clicca per espandere/ridurre Reference: I comandi della Sezione Opzioni

Attraverso i comandi di questa sezione si crea l'elenco delle varianti disponibili per il nuovo Prodotto da proporre attraverso il Carrello e-commerce.

Come Varianti principali di un Prodotto possono essere introdotte, per esempio, le taglie o i colori disponibili di un capo di abbigliamento, piuttosto che i modelli alternativi di un articolo.

Il Cliente finale potrà vedere le Varianti disponibili attraverso un'apposita lista visualizzata all'interno del Carrello di e-commerce e/o nella scheda di presentazione del Prodotto creata attraverso l'Oggetto Elenco Prodotti e selezionare quella per cui è interessato a fare l'ordine d'acquisto.

I comandi disponibili per comporre l'Elenco Varianti Principali sono:

§Aggiungi...: aggiunge una nuova Variante Principale per il Prodotto corrente. La Variante aggiunta viene visualizzata nell'Elenco Varianti Principali e può essere definita attraverso le opzioni raggruppate nella sezione Impostazioni Variante principale.

§Rimuovi: elimina la Variante Principale selezionata all'interno dell'Elenco Varianti Principali.

§Sposta sopra / Sposta sotto: agiscono sull'ordine di visualizzazione delle Varianti di Prodotto già inserite, spostando verso l'alto o verso il basso quella selezionata.

È possibile definire ciascuna Variante Principale attraverso le Impostazioni Variante principale:

§Nome/Codice: assegna un nome o un codice identificativo alla Variante Principale che si sta creando per il Prodotto corrente.

§Differenza Prezzo: specifica di quanto varia il prezzo della Variante Principale, in positivo o in negativo, rispetto al Prezzo del Prodotto impostato nella sezione Generale.

§Differenza Peso: specifica di quanto varia il peso della Variante Principale, in positivo o in negativo, rispetto al Peso del Prodotto impostato nella sezione Generale.

Clicca per espandere/ridurre Reference: I comandi della Sezione Sconto

Attraverso i comandi di questa sezione si imposta un eventuale sconto per il nuovo Prodotto da proporre attraverso il Carrello e-commerce.Spuntando l'opzione Attiva sconto quantità è possibile creare una lista con gli sconti da applicare in base alla quantità del Prodotto ordinata. Tutti gli sconti quantità introdotti vengono visualizzati in un'apposita lista e i comandi disponibili per crearli sono:

§Aggiungi...: richiama la finestra Sconto quantità per aggiungere e impostare uno sconto quantità per il Prodotto corrente. In pratica consente di definire la Quantità di Prodotto che deve essere uguagliata o superata nell'ordine perché possa essere applicato lo Sconto (%) previsto.

§Rimuovi: elimina lo sconto quantità selezionato dalla lista.

§Modifica...: richiama la finestra Sconto quantità in modo da poter modificare lo sconto quantità selezionato. È possibile procedere a tale modifica anche tramite doppio click sullo sconto.

Best practice:

-

Come creare un Carrello di e-commerce


Carrello e-commerce | Sezione Pagamento | Metodo di Spedizione

Carrello e-commerce | Finestra Metodo di Spedizione

Passo 4 - Impostazioni Avanzate > Carrello e-commerce >

Carrello e-commerce | Finestra Metodo di Spedizione

 Return to chapter overview
Mostra/Nascondi testo nascosto

La finestra Metodo di Spedizione, richiamata dal comando Aggiungi... o dal comando Modifica... presenti nel riquadro Elenco dei metodi di Spedizione in Carrello e-commerce | Gestione Ordine, permette di definire i metodi di spedizione da attivare sul Carrello Prodotti.

La finestra Metodo di Spedizione è articolata nelle seguenti sezioni: Generale, Costo e Messaggio E-mail.

Clicca per espandere/ridurre Reference: I comandi della Sezione Generale

Attraverso i comandi di questa sezione si imposta un nuovo metodo di spedizione:

§Nome: associa un nome al metodo in modo da consentire di identificarlo tramite una dicitura chiara e sintetica.

§Descrizione: permette di introdurre una spiegazione completa del metodo.

§Immagine associata: seleziona l'immagine da associare alla descrizione del metodo corrente nelle pagine del carrello.
Clicca per espandere/ridurre Reference: I comandi della Sezione Costo

Attraverso i comandi di questa sezione si specifica l'ammontare delle spese aggiuntive applicate nel caso il Cliente scelga il metodo di spedizione corrente. Tale ammontare può essere impostato secondo una delle seguenti modalità:

§Costo fisso: specifica un unico costo fisso per il metodo di spedizione corrente. Tale costo rimarrà invariato, indipendentemente da qualsiasi parametro relativo all'Ordine.

§Costo relativo al totale dell'Ordine: crea una o più fasce di costo per il metodo di spedizione corrente, in base al totale dell'Ordine raggiunto. In pratica, i pulsanti Aggiungi... e Modifica... richiamano la finestra Costo di Spedizione attraverso la quale è possibile definire il Totale Ordine che deve essere uguagliato o superato perché possa essere applicato il Costo di spedizione specificato.

§Costo relativo al totale del Peso: crea una o più fasce di costo per il metodo di spedizione corrente, in base al totale del Peso raggiunto dai Prodotti inseriti nell'Ordine. Anche in questo caso, i pulsanti Aggiungi... e Modifica... richiamano la finestra Prezzo di Spedizione attraverso la quale è possibile definire il Peso Totale che deve essere uguagliato o superato perché possa essere applicato il Costo di spedizione specificato.

Se si vogliono impostare delle fasce di costo in base al totale del Peso, perché i costi di spedizione vengano calcolati correttamente è importante specificare il Peso di ogni Prodotto presente nel Carrello attraverso l'apposita opzione presente nella finestra Impostazioni Prodotto | Generale.

In più, è disponibile anche l'opzione:

§IVA (%): se attiva, specifica l'IVA da applicare sul costo associato al metodo di spedizione. Questa opzione è disponibile solo se in Carrello e-commerce | Opzioni è stata scelta la Tipologia "IVA inclusa nel prezzo" o "IVA esclusa dal prezzo" per le Impostazioni IVA.
Clicca per espandere/ridurre Reference: I comandi della Sezione Messaggio E-mail

Attraverso il campo presente in questa sezione si inserisce un testo che descrive e spiega il metodo di spedizione corrente. È bene comporre con cura questo messaggio dal momento che verrà utilizzato all'interno della e-mail di conferma dell'Ordine che verrà inviata al Cliente.

Best practice:

- | Come creare un Carrello di e-commerce
- | Come definire i contenuti della e-mail di conferma Ordine


Carrello e-commerce | Sezione Pagamento | Metodo di Pagamento

Carrello e-commerce | Finestra Metodo di Pagamento

Passo 4 - Impostazioni Avanzate > Carrello e-commerce >

Carrello e-commerce | Finestra Metodo di Pagamento

 Return to chapter overview
Mostra/Nascondi testo nascosto

La finestra Metodo di Pagamento, richiamata dal comando Aggiungi... o dal comando Modifica... presenti nel riquadro Elenco dei metodi di Pagamento in Carrello e-commerce | Gestione Ordine, permette di definire e inserire i metodi di spedizione da attivare sul Carrello Prodotti.

La finestra Metodo di Pagamento è articolata nelle seguenti sezioni: Generale, Tipo e Messaggio E-mail.

Clicca per espandere/ridurre Reference: I comandi della sezione Generale

Attraverso i comandi di questa sezione si imposta un nuovo metodo di pagamento:

§Nome: associa un nome al metodo in modo da consentire di identificarlo tramite una dicitura chiara e sintetica.

§Descrizione: permette di introdurre una spiegazione completa del metodo.

§Immagine associata: seleziona l'immagine da associare alla descrizione del metodo corrente nelle pagine del carrello.
Clicca per espandere/ridurre Reference: I comandi della sezione Tipo

Attraverso i comandi di questa sezione si specifica il tipo di pagamento richiesto scegliendo tra:

§Pagamento posticipato: il Cliente potrà portare a termine l'Ordine ed effettuare il Pagamento in un secondo momento. È indicato, per esempio, nel caso di pagamenti tramite Bonifico Bancario.

§Pagamento immediato: il Cliente potrà portare a termine l'Ordine a condizione di effettuare subito il Pagamento. È indicato nel caso di pagamenti tramite PayPal™, o altri circuiti analoghi, oppure tramite Carta di Credito.

Attivando l'opzione Pagamento immediato occorre definire il Tipo di Pagamento richiesto; in base poi al tipo scelto è necessario impostare alcuni parametri:

PayPal/Carta di Credito

§Account PayPal: campo in cui digitare l'account ottenuto in qualità di Utente registrato di PayPal™.

§Pagina visualizzata per Avvenuto Pagamento: richiama la Mappa del Sito per selezionare la Pagina che deve essere visualizzata dopo che è stato portato a termine il Pagamento.

§Pagina visualizzata per Errore Pagamento: richiama la Mappa del Sito per selezionare la Pagina che deve essere visualizzata nel caso si verifichi un errore durante la procedura di Pagamento.

Codice personalizzato

§Codice HTML per il Pulsante 'Paga Adesso': se si decide di utilizzare un sistema di pagamento alternativo a PayPal™, occorre digitare in questo campo il codice HTML fornito, in seguito all'iscrizione, dal gestore del servizio di transazione scelto.

Il codice HTML fornito dal gestore del servizio di transazione serve per creare il pulsante "Paga Adesso" e deve essere completato con l'indicazione di cosa viene acquistato e il relativo prezzo. Perché il carrello funzioni è necessario, dunque, inserire manualmente nel codice i seguenti tag:

§[ORDER_NO] - permette di riprendere il numero dell'ordine;

§[PRICE] - premette di riprendere il prezzo.

In più, sono disponibili anche le opzioni:

§Costo: specifica l'ammontare delle spese aggiuntive applicate nel caso il Cliente scelga il metodo di pagamento corrente.

§IVA (%): se attiva, specificare l'IVA da applicare sul costo associato al metodo di pagamento. Questa opzione è disponibile solo se in Carrello e-commerce | Opzioni è stata scelta la Tipologia "IVA inclusa nel prezzo" o "IVA esclusa dal prezzo" per le Impostazioni IVA.
Clicca per espandere/ridurre Reference: I comandi della sezione Messaggio E-mail

Attraverso il campo presente in questa sezione si inserisce un testo che descrive e spiega il metodo di pagamento corrente. È bene comporre con cura questo messaggio dal momento che verrà utilizzato all'interno della e-mail di conferma dell'Ordine che verrà inviata al Cliente.

Best practice:

- | Come creare un Carrello di e-commerce
- | Come definire i contenuti della e-mail di conferma Ordine


Esportazione

Esportazione del Sito

Passo 5 - Esportazione del Sito >

Esportazione del Sito

 Return to chapter overview

Giunti al termine di una sessione di lavoro o della creazione del Sito intero, al Passo 5 WebSite X5 permette di scegliere la modalità di esportazione per il Progetto corrente. Innanzitutto, grazie al Motore FTP incluso, è possibile procedere direttamente alla pubblicazione dei file su Server: viene gestita anche la connessione sicura ed è possibile risparmiare tempo lavorando in multi-connessione e, in caso di aggiornamenti, pubblicando solo i file modificati. In alternativa, è possibile esportare il Sito su un disco del proprio PC in modo da poter disporre in locale di una copia dei file che verranno pubblicati su Server. Infine, tutti i file del Progetto possono essere raggruppati all'interno di un'unica cartella al fine di poter essere facilmente trasferiti su un altro computer per proseguire nel lavoro.

Dunque, nello specifico le opzioni di esportazione disponibili sono:

Esporta il Sito su Internet

Esporta il Sito su disco

Esporta il Progetto


Esportazione del Sito su Internet

Passo 5 - Esportazione del Sito >

Esportazione del Sito su Internet

 Return to chapter overview
Mostra/Nascondi testo nascosto

Questa finestra permette di effettuare la pubblicazione in rete del Sito creato.

WebSite X5 mette a disposizione un Motore FTP interno in modo da poter procedere direttamente alla pubblicazione online dei Siti realizzati. Infatti, tutti i file necessari perché un Sito possa essere correttamente visualizzato in Internet sono salvati sul computer sul quale si è svolto il lavoro. Quindi, per far sì che gli Utenti che si connettono ad Internet possano vedere le nostre Pagine è necessario copiare questi file su un Server, ovvero su un computer permanentemente connesso alla Rete.

Clicca per espandere/ridurre Reference: I comandi per impostare la connessione al Server

Per procedere nell'esportazione di tutti i file relativi al Sito è necessario, per prima cosa, specificare i seguenti Parametri di connessione (dati forniti dal Provider gestore del servizio al quale ci si appoggia per avere lo Spazio Web):

§Tipo di Server: specifica che tipo di connessione utilizzare per procedere alla pubblicazione dei file del Sito su Server. In relazioni a ciò che viene supportato dal proprio Server, è possibile scegliere tra:

-FTP - File Transfer Protocol: previsto di default, è uno dei primi protocolli per la trasmissione dei dati che è stato introdotto ed è ampiamente diffuso. La specifica originale di FTP non prevede alcuna cifratura per i dati scambiati tra Client e Server.

-SFTP - SSH File Transfer Protocol: è un protocollo di rete che prevede il trasferimento sicuro dei dati, grazie allo stabilimento di sessioni remote cifrate, oltre che funzionalità di manipolazione sui file remoti.

-FTPS - FTP over explicit TLS/SSL: per risolvere i problemi di sicurezza, aggiunge al protocollo FTP originale un layer di cifratura SSL/TLS oltre che una serie di comandi e codici di risposta.

§Indirizzo FTP: in questo campo si deve inserire il proprio indirizzo FTP. Un esempio di indirizzo FTP è: "ftp.websitex5.com", dove "websitex5.com" è il nome del dominio.

§Username / Password: in questi campi è necessario inserire le proprie Username e Password.

§Salva password: attivando questa opzione, la Password specificata viene memorizzata in modo da non dover essere reimmessa in futuro.

In più, è possibile specificare alcuni Parametri opzionali, non indispensabili per stabilire la connessione al Server, quali:

§Cartella di destinazione: in questo campo si può specificare la cartella di destinazione assegnata dal Provider per il proprio Spazio Web. Se non si inserisce un percorso, sarà comunque possibile impostarlo nella videata successiva di WebSite X5.

§Porta: specifica la porta del Server sulla quale viene stabilita la connessione (dato fornito dal Provider dello Spazio Web). Nella maggior parte dei casi non è necessario modificare il valore impostato di default.

§Connessioni simultanee: specifica il numero di connessioni al Server che il Motore FTP del Programma deve aprire simultaneamente per procedere alla pubblicazione dei file del Sito. Il numero di connessioni equivale al numero massimo di file che possono essere esportati in contemporanea.

Le Connessioni simultanee sono una funzionalità che deve essere supportata dal Server utilizzato. Se supportate, oltre un certo limite, aumentare il numero di connessioni simultanee non comporta un reale vantaggio in termini di tempo. Si consiglia di partire da 3 e provare a modificare tale parametro, incrementandolo progressivamente, in modo da identificare il numero di connessioni migliore in relazione alla dimensioni della banda gestita dal Server utilizzato. Indicativamente, non è consigliabile superare le 10 connessioni simultanee.

§Utilizza FTP passivo: attiva di default, prevede l'utilizzo dell'FTP passivo come modalità di pubblicazione. Questa modalità è consigliabile per una maggior compatibilità di connessione con il Server.

§Usa compressione gzip: attiva di default, prevede che i file relativi al Sito vengano compressi durante l'esportazione. In questo modo è probabile riuscire a portare a termine la pubblicazione in minor tempo.

Non tutti i Server supportano la compressione in gzip: in caso l'opzione sia attiva e il Server utilizzato non la supporti, i file non verranno compressi e la pubblicazione verrà portata ugualmente a termine. La compressione gzip funziona molto bene con file di grosse dimensioni (per esempio, perché contenenti molte immagini o video) mentre non è consigliata nel caso di file di piccole dimensioni.

Impostati i Parametri necessari per effettuare la connessione al Server, è possibile specificare il Tipo di caricamento, ovvero ciò che si vuole effettivamente pubblicare:

§Esporta tutti i file del Sito Internet: in questo caso viene pubblicato l'intero Sito. Questa modalità è indicata quando si procede per la prima volta alla pubblicazione di un Progetto o quando sono state fatte numerose e sostanziali modifiche al Sito.

§Esporta solo i file modificati dall'ultima esportazione avvenuta in data: in questo caso vengono pubblicati solo i file che sono stati modificati rispetto a quanto pubblicato con l'esportazione avvenuta nella data ricordata. Questa modalità è indicata per Siti che vengono mantenuti costantemente aggiornati e offre il vantaggio di richiedere un tempo inferiore rispetto alla pubblicazione completa del Sito.

La data di pubblicazione viene salvata all'interno del file di Progetto: per questo è importante, dopo aver pubblicato i file, salvare sempre le modifiche.

Anche se viene richiesta l'esportazione dei soli file modificati, normalmente le pagine HTML e i file di risorse (presenti nella sotto-cartella Res) vengono ripubblicati: è infatti molto probabile che abbiano comunque subito degli aggiornamenti.

§Esporta solo il Blog e il Feed RSS: in questo caso vengono pubblicati solo i file .PHP e .XML del Blog e i file .XML del Feed RSS gestiti attraverso le apposite sezioni del Passo 4 - Impostazioni Avanzate. Questa modalità, attiva solo se il Blog e/o il Feed RSS è già stato pubblicato una prima volta, è indicata quando non sono stati apportati aggiornamenti al Sito ma solo aggiunte nuovi post nel Blog o nuove notizie nel Feed RSS.
Clicca per espandere/ridurre Reference: I comandi per effettuare la pubblicazione online

Dopo aver impostato i parametri richiesti è sufficiente cliccare sul pulsante Avanti per effettuare la connessione al Server. Stabilita la connessione al Server, in un'apposita finestra vengono visualizzate le cartelle in esso già presenti. A questo punto, utilizzando i comandi messi a disposizione, è necessario posizionarsi all'interno della cartella nella quale si desidera pubblicare i file relativi al Sito.

La cartella all'interno della quale pubblicare il Sito dovrebbe contenere un file index.html. In qualsiasi caso, se non si è sicuri della cartella in cui pubblicare, occorre contattare il proprio Provider e chiederne conferma: non tutte le cartelle presenti su Server vanno bene per la pubblicazione.

Clicca per espandere/ridurre

I comandi disponibili per agire sulle cartelle e i file presenti su Server sono:

Accedi alla cartella superiore

Permette di accedere alla cartella superiore.

Aggiorna

Ricarica il contenuto della cartella corrente.

Nuova cartella

Crea una nuova cartella.

Elimina

Elimina il file o la cartella selezionata.

Rinomina

Permette di modificare il nome del file o della cartella selezionata.

Carica un file sul Server / Scarica il file selezionato dal Server

Permettono, rispettivamente, di pubblicare su Server uno o più file che non fanno parte del Progetto e di scaricare su PC locale file già pubblicato sul Server.

Visualizzazione Lista / Visualizzazione Dettagli

Consentono di impostare come deve essere visualizzata la lista dei file.

Infine, è disponibile una sezione in cui è possibile scegliere se visualizzare:

§Registro Messaggi: vengono riportati tutti i messaggi (ovvero i log) e i possibili errori generati durante la comunicazione con il Server.

§Coda trasferimenti: visualizza i file (il numero massimo di tali file dipende dalle Connessioni simultanee impostate) di cui si sta procedendo alla pubblicazione. Per ogni file, una barra di progressione visualizza lo stato di avanzamento della pubblicazione. A pubblicazione avvenuta, il file viene rimosso dalla Coda dei trasferimenti.

Durante l'esportazione, WebSite X5 procede a copiare sul Server tutti file contenuti nella cartella di registrazione. Se in questa cartella sono già presenti dei file che hanno lo stesso nome di quelli che vengono pubblicati, questi vengono sovrascritti. In automatico, WebSite X5 non cancella mai alcun file già presente su Server: per rimuovere file non più necessari occorre agire manualmente.


Esportazione completata

Passo 5 - Esportazione del Sito > Esportazione del Sito su Internet >

Esportazione completata

 Return to chapter overview

Dopo aver portato a termine con successo la pubblicazione online (vedere, Esportazione del Sito su Internet), questa finestra suggerisce alcune azioni da compiere per pubblicizzare il Sito realizzato attraverso canali come la Gallery di WebSite X5, Google™, Facebook e Twitter.

Nello specifico, le opzioni disponibili sono:

Il tuo Sito è stato pubblicato!

Avvia il Browser Internet predefinito per navigare sul Sito appena messo online e controllare che tutto funzioni.

WebSite X5 Gallery

Si collega alla sezione dedicata alla Gallery di WebSite X5 Answers per poter segnalare il Sito appena pubblicato. Ricordiamo che la Gallery è una raccolta di Siti realizzati con WebSite X5 e segnalati direttamente dai loro Autori.

Aggiorna la SiteMap su Google

Invia a Google™ la segnalazione della SiteMap del Sito appena pubblicato, in modo da sollecitarne l'indicizzazione da parte dello spider del Motore.

Notifica la pubblicazione su Facebook

Permette di visualizzare una pagina di Facebook in cui, dopo essersi loggati, è possibile scrivere un commento per segnalare a tutti i propri contatti l'avvenuta pubblicazione del Sito. Il commento verrà visualizzato sulla bacheca del proprio profilo.

Notifica la pubblicazione su Twitter

Permette di visualizzare una pagina di Twitter in cui, dopo essersi loggati, è possibile scrivere un tweet per segnalare a tutti i propri contatti l'avvenuta pubblicazione del Sito. Il tweet verrà visualizzato sulla timeline del proprio profilo.


Esportazione su disco

Passo 5 - Esportazione del Sito >

Esportazione su disco

 Return to chapter overview

Questa finestra permette di effettuare la pubblicazione del Sito creato su un altro disco del computer.

L'esportazione su disco serve per avere una copia su PC dei file che verranno pubblicati su Server, per poterla riversare su CD/DVD/USB o per poter effettuare eventuali modifiche sulle pagine HTML create prima dell'effettiva pubblicazione.

Per procedere nell'esportazione di tutti i file del Progetto è sufficiente specificare:

§Cartella di destinazione: specifica la cartella dove esportare il Sito creato. Se la cartella specificata non esiste, viene automaticamente creata.

L'Esportazione su disco non è indicata per la creazione di copie di Backup del Progetto dal momento che permette di disporre dei file creati dal programma per la pubblicazione online e non del file di Progetto su cui lavorare.

Per creare delle copie di sicurezza del Progetto in modo da poter effettuare un ripristino di versioni precedenti, occorre utilizzare le funzioni di Backup incluse nel menu Salva.

Per creare, invece, una copia di Backup da utilizzare in caso di perdita del Progetto originale, è necessario utilizzare la funzione Esporta il Progetto: in questo modo si può disporre, infatti, di una copia dei file originali del Progetto.

Best practice:

- | Come gestire i Progetti in WebSite X5
- | Come gestire il backup dei Progetti


Esportazione del Progetto

Esporta il Progetto

Passo 5 - Esportazione del Sito >

Esporta il Progetto

 Return to chapter overview

Questa finestra permette di esportare in un unico file compresso tutti i file collegati al Progetto, al fine di poterli trasferire su un altro computer o di creare una copia di backup.

Per procedere nell'esportazione del file di Progetto è sufficiente specificare:

§Cartella di destinazione: specifica la cartella dove esportare il file di Progetto. Se la cartella specificata non esiste, viene creata automaticamente.

In seguito all'esportazione, dunque, nella cartella di destinazione specificata viene creato un unico file compresso che ha lo stesso nome del Progetto ed estensione .IWZIP: in questo modo, per il progetto "MioProgetto" verrà creato il file MioProgetto.iwzip. All'interno di questo file compresso vengono salvati sia il file di Progetto (file .IWPRJ) che tutti i file ad esso collegati (per esempio, relativi a Immagini, Video o Animazioni importate).

Prima di avviare l'esportazione è possibile attivare le seguenti opzioni:

§Includi copia dell'anteprima del Sito: include nel file compresso .IWZIP anche i file necessari per la visualizzazione dell'Anteprima del Sito in locale. Includendo questi file, le dimensioni del file .IWZIP aumentano ma non sarà necessario ricrearli se si importerà il Progetto su un altro computer.

Il file compresso .IWZIP potrà essere trasferito su un computer diverso da quello su cui è stato creato e aperto nel programma attraverso il comando Importa..., disponibile nella finestra Scelta del Progetto.

Best practice:

- | Come gestire i Progetti in WebSite X5
- | Come gestire il backup dei Progetti


backup_ht

Come gestire il backup dei Progetti

Best Practice > Impostazioni preliminari >

Come gestire il backup dei Progetti

 Return to chapter overview
Mostra/Nascondi testo nascosto

Un aspetto di fondamentale importanza nella gestione di un Progetto è rappresentato dall'attività di backup.

Fare il backup di un Progetto significa crearne una copia di sicurezza, da archiviare sullo stesso PC o anche su un supporto di memorizzazione diverso, in modo da assicurarsi una certa ridondanza dei dati.

Disporre di una o più copie di sicurezza di un Progetto permette di risolvere due generi di problemi:

§Disaster recovery - ovvero il ripristino del Progetto in caso di incidenti irreparabili dovuti, per esempio, a un guasto del computer o alla cancellazione involontaria dei dati.

§Versioning - ovvero la creazione di copie corrispondenti a versioni diverse del Progetto in modo da poter, per esempio, annullare le modifiche fatte in una sessione di lavoro, ripristinando semplicemente una precedente copia di riserva.

Ovviamente, perché l'attività di Backup sia efficace deve essere impostata correttamente ed effettuata con una certa sistematicità.

Clicca per espandere/ridurre How To: Versioning - Come impostare la creazione automatica di una copia di backup

Per impostare la creazione automatica di una copia di backup di un Progetto è necessario:

§Aprire il Progetto.

§Attivare l'opzione Crea Backup al primo salvataggio disponibile nel menu Salva.

§In alternativa o contemporaneamente, attivare l'opzione Crea Backup ad ogni pubblicazione sempre disponibile nel menu Salva.

Mentre l'opzione Crea Backup al primo salvataggio fa in modo che venga creata una copia di sicurezza del Progetto precedente al primo salvataggio, l'opzione Crea Backup ad ogni pubblicazione crea la copia di riserva prima della pubblicazione online del Sito.

Tutte le copie di Backup così generate vengono salvate all'interno della sotto-cartella Backup presente all'interno della Cartella dei Progetti specificata attraverso la finestra Preferenze.
Clicca per espandere/ridurre How To: Versioning - Come ripristinare una copia di backup di un Progetto

Per ripristinare una copia di backup di un Progetto è necessario:

§Aprire la sotto-cartella Backup presente all'interno della Cartella dei Progetti (specificata attraverso la finestra Preferenze) e selezionare il file relativo alla copia di backup che si desidera ripristinare: il file Backup.iwprj generato dalla funzione Crea Backup al primo salvataggio o un file Uploaded_timestamp.iwprj generato dalla funzione Crea Backup ad ogni pubblicazione.

§Tagliare il file selezionato dalla sotto-cartella Backup e incollarlo all'interno della Cartella dei Progetti.

§Eliminare il file Project.iwprj e rinominare il file di Backup come "Project.iwprj".
Clicca per espandere/ridurre How To: Disaster Recovery - Come creare una copia di backup di un Progetto

Per creare una copia di backup di un Progetto da archiviare su un supporto diverso dal PC sul quale si sta lavorando è necessario:

§Al Passo 5 - Esportazione del Sito scegliere Esporta il Progetto in modo da esportare in un unico file compresso (.IWZIP) tutti i file collegati al Progetto.

§Copiare il file .IWZIP ottenuto sul supporto di memorizzazione scelto per conservare la copia di backup.

Clicca per espandere/ridurre How To: Disaster Recovery - Come ripristinare una copia di backup di un Progetto

Per ripristinare una copia di backup di un Progetto archiviata su un supporto diverso dal PC sul quale si sta lavorando è necessario:

§Nella finestra Scelta del Progetto cliccare sul pulsante Importa... in modo da selezionare il file compresso (.IWZIP) corrispondente al Progetto da ripristinare.

§Selezionare il Progetto ripristinato per aprirlo e procedere con le modifiche.

Best practice:

-

Come gestire i Progetti


gestione_progetti_ht

Come gestire i Progetti in WebSite X5

Best Practice > Passo 1 - Impostazioni Generali >

Come gestire i Progetti in WebSite X5

 Return to chapter overview
Mostra/Nascondi testo nascosto

In WebSite X5 la gestione dei Progetti è molto semplice, dal momento che il programma automatizza e ottimizza molte procedure.

Per prima cosa è utile precisare che in WebSite X5 ogni Sito realizzato corrisponde a un Progetto, ovvero a un file nominato Project.IWPRJ. Questo file viene automaticamente creato al primo salvataggio e non occorre specificare nulla: viene archiviato nella Cartella dei Progetti che può essere definita attraverso l'apposita opzione della finestra Preferenze.

Oltre a generare l'indispensabile file di Progetto, WebSite X5 procede anche a creare e ad archiviare una copia di tutte le risorse (immagini, animazioni, video, ecc.) collegate nel documento. In questo modo garantisce due vantaggi:

1.Le risorse collegate nel Progetto vengono ottimizzate: le copie delle immagini, per esempio, non mantengono le dimensioni degli originali ma assumono quelle utili per la visualizzazione nel Sito e, in più, vengono salvate in un formato compresso.

2.Anche se i file originali collegati al Progetto vengono spostati o rimossi dal loro percorso di origine, il Progetto continua a funzionare e tutte le risorse vengono visualizzate correttamente.

Clicca per espandere/ridurre How To: Come esportare/importare un Progetto da un computer a un altro

Lavorando a un Progetto può nascere l'esigenza di spostarlo da un computer a un altro, perché si lavora a casa e in ufficio, si collabora con altre persone o per altri motivi analoghi. In questi casi è essenziale riuscire a spostare non solo il file di Progetto ma anche tutti i file ad esso collegati, per evitare che insorgano malfunzionamenti nel Sito.

Il primo passo da fare è esportare il Progetto:

§Al Passo 5 - Esportazione del Sito, selezionare la voce Esporta il Progetto e cliccare sul pulsante Avanti.

§Nella finestra Esporta il Progetto selezionare la Cartella di destinazione e, opzionalmente, attivare l' opzioni per includere nell'esportazione anche i file per visualizzare l'Anteprima del Sito in locale.

Terminata l'esportazione, si ottiene un unico file compresso in formato .IWZIP che può essere facilmente trasferito dalla Cartella di destinazione presente sul computer di partenza ad un altro computer, diverso da quello su cui si sta lavorando.

Per importare il Progetto su un altro computer dove è installato WebSite X5 occorre:

§Al Passo 1 - Scelta del Progetto cliccare sul pulsante Importa... e selezionare il file .IWZIP spostato.

§Al termine dell'importazione, l'anteprima del Progetto viene visualizzata nella lista dei Progetti esistenti: selezionarla e cliccare sul pulsante Avanti per procedere con le modifiche.

Clicca per espandere/ridurre How To: Come creare una copia di un Progetto

Ci sono situazioni in cui è comodo poter disporre di una copia del Progetto originale. Se l'esigenza è quella di salvare delle copie per disporre di un punto di ripristino prima di apportare delle modifiche, si possono effettuare dei Backup attraverso le apposite funzioni messe a disposizione da WebSite X5 (vedere, Come gestire il backup dei Progetti). Se, invece, si desidera duplicare il Progetto per ricavare dal primo la base da cui partire per lo sviluppo di un altro Sito, conviene:

§Al Passo 1 - Scelta del Progetto selezionare, dalla lista dei Progetti esistenti, il Progetto di cui si vuole creare una copia.

§Cliccare sul pulsante Duplica.

§Selezionare la copia del Progetto ottenuta e rinominarla opportunamente, quindi cliccare sul pulsante Avanti per procedere con le modifiche.

Duplicare il Progetto è utile, per esempio, quando si deve realizzare un Sito consultabile in lingue diverse. Creato il Progetto nella lingua principale (es. Italiano), lo si duplica per partire con la realizzazione del Progetto in una lingua alternativa (es. Inglese): in questo modo gran parte del lavoro è già fatto e non rimane che introdurre le localizzazioni dei testi e aggiornare gli elementi grafici che variano (vedere, Come creare un Sito multi-lingua).
<%%EXTOGGLE> How To: Come eliminare, duplicare o rintracciare un file importato nel Progetto

Lavorando allo sviluppo di un Progetto è frequente procedere all'importazione di un file: è il caso, per esempio, di immagini, video, audio o risorse analoghe. In tutti questi casi è sufficiente cliccare sul pulsante [image] per sfogliare le cartelle delle risorse e selezionare il file da importare.

I file importati vengono automaticamente duplicati dal Programma: gli originali vengono mantenuti nel percorso originale, le copie generate vengono salvate all'interno di una libreria interna. All'interno del Progetto vengono impiegate le copie, e non gli originali dei file.

Una volta importato, solo il nome del file viene riportato all'interno del campo presente nel Programma: per esempio, per l'Oggetto Immagine il nome del file usato è visualizzato nel campo relativo all'opzione File su Internet.

Cliccando con il tasto destro del mouse sul nome del file importato, si richiama un menu contestuale con i seguenti comandi:

§Cancella: elimina il file importato. Equivale a cliccare sul nome del file e a premere il pulsante CANC.

§Apri percorso file...: apre la cartella in cui è presente il file originario in modo da permettere di ricostruirne il percorso.

§Salva come...: crea una copia, nella cartella indicata, del file salvato nella libreria interna del Programma.

Best practice:

-

Come gestire il backup dei Progetti


gestione_lingue_ht

Come gestire le Lingue per i testi inseriti in automatico

Best Practice > Passo 1 - Impostazioni Generali >

Come gestire le Lingue per i testi inseriti in automatico

 Return to chapter overview
Mostra/Nascondi testo nascosto

Alcuni testi presenti nelle Pagine create con WebSite X5 vengono inseriti automaticamente dal Programma; sono testi come, per esempio, i link ad Ancore interne, i Pulsanti dell'Oggetto Galleria, le etichette dell'Oggetto Modulo Invio E-mail, le etichette e i testi dei Carrello di e-commerce, i testi della Mappa del Sito.

Perché questi testi inseriti in automatico siano nella Lingua corretta, è necessario specificare la Lingua principale del Sito attraverso l'opzione Lingua dei contenuti disponibile nella finestra Impostazioni Generali. Di default, WebSite X5 permette di scegliere fra un certo numero di Lingue, fra cui Italiano, Inglese e Tedesco, di cui dispone già di tutte le traduzioni necessarie. In qualsiasi caso, le traduzioni impostate possono essere modificate, così come è possibile aggiungere o importare nuove Lingue o rimuovere quelle che non servono. Per compiere questa serie di operazioni è necessario accedere alla finestra Gestione Contenuti in Lingua cliccando sul pulsante [image] posto a fianco dell'opzione Lingua dei contenuti.

Clicca per espandere/ridurre How To: Come modificare una voce già introdotta

Un esempio di testo inserito in automatico dal Programma sono le etichette dei pulsanti "Invia" e "Reset" previsti al termine delle form di contatto.

Ipotizzando di voler modificare l'etichetta "Reset" in "Annulla", dopo aver impostato "Italiano" come Lingua dei contenuti, occorre procedere nel seguente modo:

§Nella finestra Gestione Contenuti in Lingua, se non ancora attiva, cliccare sulla Lingua "IT - Italian" in modo da visualizzarne la colonna relativa nella Tabella dei contenuti.

§Nella prima colonna della Tabella dei contenuti, identificare la voce "form_reset" che è quella relativa all'etichetta da modificare: spostarsi lungo la riga per arrivare alla cella corrispondente nella colonna della Lingua Italiano. Fare doppio click nella cella in modo da far comparire il cursore: cancellare il testo "Reset" e digitare "Annulla".

§Chiudere la finestra: in questo modo le modifiche effettuate verranno automaticamente salvate.
Clicca per espandere/ridurre How To: Come aggiungere una nuova Lingua

Per creare un Sito in una Lingua non ancora prevista (per esempio, in Portoghese) evitando che i testi gestiti in automatico vengano inseriti nella versione Inglese (utilizzata di default), occorre predisporre una nuova Lingua e immettere le traduzioni richieste. Avendo le competenze linguistiche necessarie, è un'operazione molto semplice:

§Nella finestra Gestione Contenuti in Lingua cliccare sul pulsante Aggiungi una nuova Lingua e, attraverso la finestra di dialogo richiamata, inserire la dicitura "PT - Português": in questo modo la nuova voce compare in coda all'elenco delle Lingue disponibili.

§Cliccare sulla voce "PT - Português" in modo da visualizzare la colonna relativa a questa Lingua nella Tabella delle traduzioni.

§Cliccare nelle diverse celle della colonna "PT - Português" per immettere le traduzioni necessarie.

§Inserite le traduzione, chiudere la finestra: in questo modo le modifiche effettuate verranno automaticamente salvate.

§Nella finestra Impostazioni Generali impostare "PT - Português" come Lingua dei contenuti.
Clicca per espandere/ridurre How to: Come esportare/importare una Lingua

Se si ha l'esigenza di lavorare allo sviluppo di un Sito in una Lingua non prevista di default dal Programma su due diversi PC, è possibile esportare la nuova Lingua creata su una postazione ed importarla sulla seconda postazione, evitando di ricrearla daccapo.

§Sul primo PC, accedere alla finestra Gestione Contenuti in Lingua, cliccare sul pulsante Aggiungi una nuova Lingua e procedere alla creazione della nuova Lingua.

§Selezionare la Lingua creata dall'elenco delle Lingue e cliccare sul pulsante [image] Esporta la Lingua selezionata: verrà salvato un file .XML nella cartella specificata.

§Spostare il file .XML ottenuto sul secondo PC.

§Aprire il Programma, accedere alla finestra Gestione Contenuti in Lingua e cliccare sul pulsante [image] Importa una nuova Lingua selezionando il file .XML predisposto.

Se la Lingua importata è già presente nell'elenco non viene duplicata ma vengono solo aggiunte le nuove voci e aggiornate quelle modificate.

Best practice:

-

Come creare un Sito multi-lingua


Cosa fare per usare Google Webmaster Central™

Best Practice > Passo 1 - Impostazioni Generali > Integrazione con Google >

Cosa fare per usare Google Webmaster Central™

 Return to chapter overview

Google Webmaster Central™ è una suite di strumenti messa gratuitamente a disposizione da Google™ per permettere ai Webmaster di rendere i Siti conformi alle sue indicazioni. Questi strumenti servono per scoprire come Google™ vede un Sito e sono di aiuto per diagnosticare eventuali problemi: se correttamente impiegati possono concorrere a migliorare la visibilità del Sito sul Motore.

Per poter utilizzare Google Webmaster Central™ occorre innanzi tutto avere un proprio Account Google, quindi dimostrare di essere realmente il proprietario del Sito che si intende analizzare. Uno dei metodi per dimostrare di essere il proprietario di un Sito è quello di copiare un metatag fornito da Google™ e incollarlo nella Home Page del Sito nella prima sezione <head> della Pagina, prima della sezione <body>.

Riassumendo, i passi da seguire sono:

§Avere un account su Google™.

§Accedere alla pagina di presentazione di Google Webmaster Central™ e fare il login.

§Nella pagina Home cliccare sul pulsante Aggiungi un sito, digitare la URL del Sito che si intende monitorare, e confermare cliccando su Continua.

§Nella pagina Verifica Proprietà a cui si accede, scegliere come metodo di verifica Aggiungi un metatag alla home page del tuo sito.

§Copiare il metatag fornito da Google™ e incollarlo nel campo Metatag di verifica per Google Webmaster Central della finestra Impostazioni Generali | Esperto di WebSite X5: il Programma si preoccuperà di inserire il metatag nella posizione corretta all'interno del codice HTML della Home Page.

§Il metatag di controllo fornito da Google™ si presenta come nell'esempio seguente:

<meta name="verify-v1" content="VOPYsjbR4uw/YqV+MWLB0lVmJt0niwdkv9PQTsTREHQ=" />

§Dopo aver pubblicato il Sito online, tornare in questa stessa pagina di Google Webmaster Central™ e portare a termine la procedura cliccando su Verifica.


Come attivare un servizio di statistiche come, per esempio, Google Analytics

Come attivare un servizio di statistiche come Google Analytics™

Best Practice > Passo 1 - Impostazioni Generali > Integrazione con Google >

Come attivare un servizio di statistiche come Google Analytics™

 Return to chapter overview

In rete sono numerosi i servizi di statistiche disponibili e fra questi uno dei più conosciuti è quello fornito da Google: Google Analytics™. Grazie a questo strumento, completamente gratuito, è possibile disporre di numerosi report per monitorare e analizzare, anche approfonditamente, gli accessi al sito. Google Analytics™ può essere utilizzato a diversi livelli: si può partire con il rilevare semplicemente il numero di visite o spingersi oltre arrivando ad esplorare gli andamenti di campagne pubblicitarie portate avanti con il programma Google Adsense™.

Per poter sfruttare Google Analytics™ occorre dire al Motore quale Sito intendiamo analizzare e, nello specifico, quali Pagine devono essere tenute sotto controllo: per far questo occorre inserire un codice di monitoraggio all'interno del codice delle Pagine del Sito.

Riassumendo, i passi da seguire sono:

§Avere un account su Google™.

§Accedere alla pagina di presentazione di Google Analytics™ e fare il login.

§Nella pagina Impostazioni Analytics inserire il sito che si intende monitorare utilizzando il comando Aggiungi nuovo profilo.

§Creato il profilo, nella pagina Panoramica cliccare sul pulsante Modifica presente nella colonna Azioni per il Sito Web su cui si vuole agire.

§Nella pagina Impostazioni profilo a cui si accede compare la dicitura "Monitoraggio sconosciuto": cliccare su Verifica stato per visualizzare il codice da utilizzare per il monitoraggio delle pagine.

§Copiare il codice per il monitoraggio fornito da Google™, aprire la finestra Impostazioni Generali | Esperto di WebSite X5 e incollarlo nel campo relativo all'opzione Codice personalizzato, specificando che deve essere inserito Prima della chiusura del tag HEAD.

Il codice per il monitoraggio fornito da Google™ si presenta come nell'esempio seguente:

<script type="text/javascript">

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

</script>

<script type="text/javascript">

try {

var pageTracker = _gat._getTracker("UA-110367-1");

pageTracker._trackPageview();

} catch(err) {}</script>


Come creare e collegare la SiteMap del Sito

Best Practice > Passo 1 - Impostazioni Generali > Integrazione con Google >

Come creare e collegare la SiteMap del Sito

 Return to chapter overview
Mostra/Nascondi testo nascosto

WebSite X5 è in grado di generare la SiteMap XML del Sito.

Una SiteMap non è altro che un file XML contenente l'elenco delle Pagine di un Sito: è stata introdotta da Google™ (e ora viene utilizzata anche da Yahoo! e MSN) per effettuare una migliore e più rapida scansione dei Siti Web. In altre parole, creando e inviando la SiteMap, i Webmaster possono accertarsi che un Motore di ricerca, nello specifico Google™, venga a conoscenza di tutte le Pagine presenti in un Sito, comprese quelle che rischierebbero di non essere individuate attraverso la normale procedura di scansione.

Attraverso la SiteMap è possibile veicolare ai Motori di ricerca anche informazioni relative ai contenuti del Sito quali video, immagini, notizie, ecc. In più, la SiteMap può contenere informazioni aggiuntive come: la frequenza con la quale viene aggiornata ciascuna Pagina; la data dell'ultima modifica delle Pagine; l'importanza di ciascuna Pagina nell'economia del Sito (tale priorità non influisce in alcun modo posizionamento delle Pagine nei risultati delle ricerche).

Clicca per espandere/ridurre How To - Come attivare la SiteMap

Per generare e collegare la SiteMap a un Sito è sufficiente lasciare attiva, come di default, l'opzione Crea automaticamente la SiteMap presente nella finestra Impostazioni Generali | Esperto.

Fatto questo è possibile fare in modo che nella SiteMap vengano inserite alcune informazioni aggiuntive, specifiche per ciascuna Pagina, nel seguente modo:

§Al Passo 2 - Creazione della Mappa selezionare la Pagina su cui lavorare.

§Cliccare sul pulsante Proprietà... per richiamare la finestra Proprietà Pagina e aprire la sezione Esperto.

§Lasciando attiva l'opzione Inserisci questa Pagina nella SiteMap, impostare la Priorità dei contenuti e la Frequenza di aggiornamento.

§Ripetere queste operazioni per le diverse Pagine del Sito.
Clicca per espandere/ridurre How To - Come aggiungere le Immagini nella SiteMap

La SiteMap può essere utilizzata per passare a Google™ anche informazioni aggiuntive sulle immagini presenti in un Sito, aiutandolo così a trovare immagini che diversamente potrebbe non rilevare (per es., perché incluse in moduli JavaScript) e a comprendere quali sono più importanti di altre. Non inserendo nella SiteMap le immagini che fanno parte del modello grafico o che hanno un puro valore ornamentale, per esempio, si indica a Google™ che sono meno importanti delle altre.

Google™ specifica che all'interno di una SiteMap è possibile inserire un massimo di 1.000 immagini per ogni Pagina e che comunque non viene garantita l'indicizzazione di tutte le immagini o l'utilizzo di tutte le informazioni inserite.

Una volta attivata la creazione della la SiteMap, è possibile aggiungere le informazioni su un'immagine in modo molto semplice:

§Fare doppio click sull'Oggetto Immagine relativo all'Immagine su cui si vuole lavorare in modo da accedere alla finestra Oggetto Immagine.

§Aprire la Sezione SiteMap e attivare l'opzione Aggiungi Immagine alla SiteMap.

§Facoltativamente, compilare i campi Titolo, Descrizione breve, Posizione geografica e URL del file di licenza.

§Ripetere le operazioni descritte per tutte le Immagini importanti contenute nel Sito.

Per maggiori informazioni, vedere Oggetto Immagine | SiteMap.
Clicca per espandere/ridurre How To - Come aggiungere le informazioni sui Video nella SiteMap

La SiteMap può essere utilizzata per passare a Google™ anche informazioni sui video presenti in un Sito. Anche in questo caso, Google™ non da garanzie ma l'inserimento dei video nella SiteMap può fare in modo che questi contenuti possano essere più facilmente rilevati e, di conseguenza, inclusi nella ricerca su Google Video™.

Attraverso la SiteMap è possibile specificare una serie di informazioni aggiuntive, quali per esempio titolo, descrizione e durata del video, che possono semplificare la ricerca. Queste e altre informazioni vengono quindi riproposte nelle Pagine con i risultati delle ricerche (SERP). È giusto sottolineare, però, che in caso di differenze, Google™ potrebbe decidere di utilizzare nelle SERP il testo disponibile nella pagine del video anziché i contenuti predisposti attraverso la SiteMap.

Per completare la SiteMap del Sito aggiungendo le informazioni sui video presenti è sufficiente procedere nel seguente modo:

§Fare doppio click sull'Oggetto Video/Suono relativo al Video su cui si vuole lavorare per accedere alla finestra Oggetto Video/Suono.

§Aprire la Sezione SiteMap e attivare l'opzione Aggiungi video alla SiteMap.

§Impostare le informazioni che devono essere obbligatoriamente presenti all'interno della SiteMap: Titolo, Descrizione breve e Immagine di anteprima del Video.

§Facoltativamente, definire anche i seguenti parametri: Categoria, Parole chiave per la ricerca, Data di pubblicazione, Durata (sec) e Contenuto adatto a minorenni.

§Ripetere le operazioni descritte per tutti i Video importanti contenuti nel Sito.

Per maggiori informazioni, vedere Oggetto Video/Suono | SiteMap.
Clicca per espandere/ridurre How To - Come eliminare una Pagina dalla SiteMap

Di default, una volta attivata la creazione della SiteMap, tutte le Pagine di un Sito vengono incluse in essa. In qualsiasi caso, se si desidera che i Motori di Ricerca non prendano in considerazione una o più Pagine, è sufficiente rimuoverle dalla SiteMap. Per fare questo è sufficiente:

§Nella finestra Passo 2 - Creazione della Mappa, selezionare la Pagina che si vuole rimuovere dalla SiteMap.

§Cliccare sul pulsante Proprietà... per richiamare la finestra Proprietà Pagina e aprire la sezione Esperto.

§Togliere il segno di spunta dall'opzione Inserisci questa Pagina nella SiteMap.

§Confermare e salvare.

Fonti:

- | SiteMap (Wikipedia.it)
- | Informazioni sulle Sitemap (Centro WebMaster di Google)
- | Aggiunta di informazioni sulle immagini a una Sitemap (Centro WebMaster di Google)
- | Informazioni sui contenuti video delle Sitemap (Centro WebMaster di Google)


modello_ht

Come lavorare con i Modelli

Best Practice > Passo 1 - Impostazioni Generali > I modelli grafici >

Come lavorare con i Modelli

 Return to chapter overview
Mostra/Nascondi testo nascosto

WebSite X5 permette una gestione dei Modelli grafici molto agile e flessibile. Grazie al ricco archivio di Modelli predefiniti, alle numerose opzioni di personalizzazione e, soprattutto, alla possibilità di creare dei propri Modelli partendo da zero, ognuno può ottenere il risultato grafico desiderato scegliendo il metodo di lavoro che gli è più congeniale.

Infine, la possibilità di esportare ed importare i Modelli (staccandoli di fatto dai Progetti per i quali sono stati creati) facilita enormemente la condivisione di queste risorse.

Clicca per espandere/ridurre How To: Come impostare un Modello Predefinito

WebSite X5 mette a disposizione una galleria di oltre 1.500 Modelli grafici Predefiniti. Impostare un Modello scegliendolo fra quelli Predefiniti è molto semplice:

§Aprire la finestra Scelta del Modello e utilizzare il filtro sul Tipo di Menu per visualizzare solo quelli che hanno il menu nella posizione che interessa (Orizzontale o Verticale).

§Scorrere le anteprime dei Modelli in modo da identificare quello che si adatta meglio all'argomento trattato dal Sito.

§Identificato il Modello da utilizzare, selezionarlo e cliccare sul pulsante Avanti per applicarlo al Progetto e passare alla finestra Modifica del Modello per aggiungere elementi all'Intestazione e al Piè di Pagina.
Clicca per espandere/ridurre How To: Come impostare un Modello Personalizzato

Una volta creato un layout attraverso un programma di grafica esterno, è possibile impostarlo in WebSite X5 sfruttando la possibilità di utilizzare il Modello Personalizzato:

§Aprire la finestra Scelta del Modello e utilizzare il filtro sulle Categorie per visualizzare i Modelli Personalizzati.

§Se non ne sono stati creati altri, nella lista è comunque già presente un Modello Personalizzato: selezionarlo e cliccare sul pulsante Modifica... (o fare doppio click sul modello) per accedere alla finestra Modello Personalizzato.

§Se, invece, si vuole creare un nuovo Modello Personalizzato da aggiungere alla galleria, cliccare sul pulsante Nuovo Modello: dato un nome al modello si può procedere alla sua personalizzazione.

Tutti i Modelli Personalizzati creati vanno ad arricchire la galleria dei Modelli e saranno così disponibili anche per Progetti diversi da quello per cui sono stati creati.
Clicca per espandere/ridurre How To: Come creare un nuovo Modello partendo da un Modello Predefinito

Un Modello Predefinito può rappresentare un'ottima base di partenza per realizzare un nuovo Modello Personalizzato, al fine di ottenere un layout più originale e adeguato al contenuto del Sito. Occorre procedere nel modo seguente:

§Aprire la finestra Scelta del Modello e, avvalendosi dei filtri disponibili, identificare e selezionare il Modello Predefinito da cui partire.

§Cliccare sul pulsante Duplica per ottenere una copia del Modello: questa copia viene salvata fra i Modelli Predefiniti.

§Selezionare la copia del Modello e cliccare sul pulsante Avanti per aprire la finestra Modello Personalizzato e apportare le modifiche necessarie.
Clicca per espandere/ridurre How To: Come importare/esportare un Modello

Il Modello grafico creato per un Progetto può essere agevolmente esportato in modo da poter poi essere importato e impiegato anche su altri PC e, magari, da altri Utenti.

Per esportare un Modello realizzato:

§Aprire la finestra Scelta del Modello, selezionare il Modello creato e cliccare sul pulsante Esporta...: viene creato un file .IWTLP nella cartella di esportazione indicata.

§Copiare il file .IWTPL sul computer su cui si intende importare il Modello.

Per importare un Modello precedentemente esportato con WebSite X5:

§Aprire la finestra Scelta del Modello e cliccare sul pulsante Importa...: selezionare il file .IWTPL corrispondete al Modello da importare.

§Il Modello importato sarà disponibile nella lista dei Modelli Personalizzati.

Nei file .IWTPL vengono salvate solo le immagini e le impostazioni relative al Modello grafico: in fase di esportazione non vengono mantenute le informazioni riguardanti il Progetto.

Per esportare in Progetto occorre utilizzare le funzioni apposite proposte al Passo 5 - Esportazione del Sito.

Best practice:

-

Dove trovare nuovi Modelli per WebSite X5


Dove trovare nuovi Modelli per WebSite X5

Best Practice > Passo 1 - Impostazioni Generali > I modelli grafici >

Dove trovare nuovi Modelli per WebSite X5

 Return to chapter overview

Se sei alla ricerca di un nuovo Modello da utilizzare nella creazione o nel restyling del tuo Sito Web, puoi trovare tante proposte in WebSite X5 Templates, la sezione del sito ufficiale di WebSite X5 raggiungibile all'indirizzo http://answers.websitex5.com/templates.

Su WebSite X5 Templates troverai numerosi nuovi Modelli grafici, realizzati da Incomedia o da altri Utenti, sia gratuiti che a pagamento, e potrai scaricarli e utilizzarli per i tuoi Progetti.

Potrai, inoltre, collaborare tu stesso alla crescita dell'archivio dei Modelli proponendo i tuoi lavori. Se sei un appassionato di grafica Web, infatti, puoi diventare un nostro autore affiliato, proporre i tuoi template e guadagnare da questa tua attività. Per maggiori informazioni sull'affiliazione http://answers.websitex5.com/templates.

Non dimenticare, dunque, di far visita periodicamente a WebSite X5 Templates per vedere cosa c'è di nuovo: se vuoi, puoi sottoscrivere il Feed RSS e mantenerti costantemente aggiornato sulle ultime novità.


mappa_ht

Come creare e lavorare sulla Mappa

Best Practice > Passo 2 - Creazione della Mappa >

Come creare e lavorare sulla Mappa

 Return to chapter overview
Mostra/Nascondi testo nascosto

In WebSite X5 la Mappa del Sito assume la tipica struttura ad albero: si parte da una Home Page e si scende ai diversi Livelli, trovando le diverse Pagine inserite. La creazione della Mappa prevede, dunque, che oltre alla Home Page, sempre presente, vi siano una serie di Pagine collegate attraverso il Menu: per questo motivo è necessario inserire tutte le Pagine organizzando, contemporaneamente, i diversi Livelli del Menu.

Ricordiamo che in WebSite X5 i Livelli sono categorie e non pagine con dei contenuti propri. Per semplicità, i Livelli possono essere intesi come dei "contenitori di Pagine".

Anche i Separatori non hanno contenuti: sono elementi che servono per organizzare visivamente il Menu di navigazione.

Clicca per espandere/ridurre
Esempio di Mappa e di Menu corrispondente

L'obiettivo nel disegnare la Mappa è, dunque, di creare una struttura in cui tutti i contenuti dei Sito siano organizzati in maniera logica così da poter essere trovati semplicemente da chi consulta il Sito.

Clicca per espandere/ridurre How To: Come disegnare la Mappa del Sito

Da un punto di vista pratico, disegnare la Mappa del Sito in WebSite X5 è molto semplice:

§Nella finestra al Passo 2 - Creazione della Mappa utilizzare i pulsanti Nuovo Livello, Nuova Pagina e Separatore per aggiungere alla Mappa, rispettivamente, un nuovo Livello, una nuova Pagina o un nuovo Separatore.

§Tutte le voci della Mappa devono essere redatte con cura: verranno riprese come voci del Menu di navigazione e come nomi dei file. Per rinominare una voce è sufficiente cliccare due volte su di essa o utilizzare il pulsante Rinomina.

§La Mappa può essere modificata in qualsiasi momento, spostando Pagine, Livelli e Separatori inseriti: per farlo occorre selezionare la voce su cui si vuole agire e trascinarla nella posizione desiderata (Drag&Drop), oppure utilizzare i pulsanti Sposa Su / Sposta Giù.
Clicca per espandere/ridurre How To: Come lavorare sulla Mappa (comandi e scorciatoie)

Lavorando direttamente sulla Mappa è possibile sfruttare alcune scorciatoie per portare a termine le operazioni più rapidamente:

§Cliccando nuovamente su un Livello, su una Pagina (inclusa la Home Page) o su un Separatore già selezionato è possibile rinominarli (in alternativa al pulsante Rinomina). Anche gli Alias delle Pagine Speciali inseriti nella cartella Menu possono essere rinominati, mentre le Pagine Speciali no.

§Dopo aver selezionato una Pagina, cliccando direttamente sul Titolo per esteso o sulla Descrizione riportate si possono modificare i testi inseriti (in alternativa, occorre riaprire la finestra Proprietà Pagina).

§Facendo doppio click su un Livello è possibile espanderlo, e vedere tutte le Pagine in esso contenute, o contrarlo (in alternativa ai pulsanti Espandi e Contrai). Analogamente, si può espandere e contrarre un Livello anche cliccando sulla freccina presente prima del nome.

§Facendo doppio click su una Pagina si passa alla finestra Creazione della Pagina per procedere alla sua costruzione.

§Facendo doppio click su una Pagina Speciale si accede alla finestra del Passo 4 - Impostazioni Avanzate che ne consente la creazione/aggiornamento.

§Selezionando un Livello e trascinandolo in una nuova posizione, lo si sposta con tutte le Pagine in esso contenute (in alternativa ai pulsanti Sposta Sopra e Sposta Sotto).

§Selezionando una o più Pagine è possibile trascinarle e spostarle in una nuova posizione (in alternativa ai pulsanti Sposta Sopra e Sposta Sotto). Per effettuare una selezione multipla è possibile ricorrere alle combinazioni CTRL + click o SHIFT + click: la selezione multipla può includere anche pagine Invisibili o Protette.

§Selezionando la cartella Menu è possibile nascondere completamente il menu di navigazione, cliccando sul pulsante Pagina non visibile sul Menu.

§Selezionando una Pagina Speciale e trascinandola all'interno della cartella Menu, ovvero fra le Pagine e i Livelli che andranno a comporre il Menu di navigazione, viene creato un Livello che si comporta come Alias della Pagina Speciale stessa. Tale Livello ha, quindi, lo stesso nome della Pagina Speciale ed ha impostato il link alla Pagina Speciale stessa. In questo modo, dunque, è possibile inserire nel Menu di navigazione una voce attiva che da l'accesso alla Pagina con i risultatati del Motore di Ricerca interno, alla Pagina di Benvenuto, al Blog, alla Pagina di Login o al Carrello di e-commerce.

§Selezionando una o più Pagine è possibile copiarle in incollarle all'interno dello stesso Progetto o in un diverso Progetto aperto in un'altra finestra del Programma. Le operazioni di Copia e Incolla possono essere effettuate attraverso gli appositi comandi della Barra Strumenti, del menu contestuale richiamato attraverso il click del tasto destro del mouse, o mediante le consuete combinazioni di tasti CTRL+C e CTRL+V. Ovviamente non è possibile utilizzare i comandi Copia e Incolla con le Pagine Speciali.


proprieta_mappa_ht

Come sfruttare le proprietà di Pagine e Livelli

Best Practice > Passo 2 - Creazione della Mappa >

Come sfruttare le proprietà di Pagine e Livelli

 Return to chapter overview
Mostra/Nascondi testo nascosto

Gli elementi fondamentali per disegnare la Mappa del Sito sono i Livelli, le Pagine e i Separatori (vedere, Passo 2 - Creazione della Mappa): semplificando, se il Sito fosse un libro, le Pagine sarebbero i fogli di cui si compone, i Livelli sarebbero i capitoli e i Separatori dei segnalibri inseriti per rendere ancora più chiara l'articolazione dei contenuti.

Pagine e Livelli hanno delle Proprietà su cui è possibile agire per ottenere risultati particolari, sia dal punto di vista grafico che dal punto di vista funzionale.

Clicca per espandere/ridurre How To: Come inserire nel Menu principale un link a un Sito esterno

Sulla base della Mappa creata al Passo 2, WebSite X5 crea automaticamente il Menu di navigazione. Testando il funzionamento del Sito sul Browser in locale, si può verificare che tutte le voci del Menu sono collegamenti attivi: quelle corrispondenti ai Livelli portano alla visualizzazione di un sotto-menu, quelle relative a una Pagina portano all'apertura della Pagina stessa.

È comunque possibile inserire all'interno del Menu di navigazione delle voci a cui sono associati collegamenti diversi: per esempio, un link che apre un Sito esterno.

Per ottenere questo risultato i passi da seguire sono i seguenti:

§Al Passo 2 - Creazione della Mappa, inserire un Nuovo Livello e nominarlo opportunamente.

§Selezionare il Livello inserito e cliccare sul pulsante Proprietà... per richiamare la finestra Proprietà Livello.

§Attivare l'opzione Non visualizzare il Menu a comparsa per questo Livello e cliccare sul pulsante [image] relativo all'opzione Collegamento su click sulla voce di Livello per richiamare la finestra Collegamento e scegliere l'azione da associare al Livello.

§Dato che si deve collegare un Sito esterno, selezionare l'azione File o URL e digitare la URL del Sito nel campo File su Internet.

Con questo sistema è possibile utilizzare tutti i tipi di azione previsti dalla finestra Collegamento per creare voci particolari del Menu di navigazione del Sito.
Clicca per espandere/ridurre How To: Come impostare lo sfondo di una Pagina diverso da quello previsto dal Modello

In linea generale, l'aspetto grafico di tutte le Pagine di un Sito è comune ed è definito dal Modello scelto (vedere, Scelta del Modello). È comunque possibile lavorare su alcuni elementi di singole Pagine in modo da distinguerle da tutte le altre. Uno di questi elementi è lo sfondo della Pagina, ovvero l'area esterna alla Pagina che viene visualizzata quando la finestra del Browser viene aperta con dimensioni superiori rispetto alla risoluzione del Sito.

Clicca per espandere/ridurre
Esempio

Per fare in modo che una particolare Pagina abbia uno sfondo diverso da quello previsto dal Modello occorre:

§Al Passo 2 - Creazione della Mappa, selezionare la Pagina su cui si vuole agire.

§Cliccare sul pulsante Proprietà... per richiamare la finestra Proprietà Pagina e aprire la sezione Grafica.

§In Sfondo del Sito solo per questa Pagina utilizzare l'opzione File Immagine per importare l'immagine da utilizzare come sfondo. Se necessario utilizzare le opzioni Disposizione e Allineamento per posizionare correttamente l'immagine rispetto alla finestra del Browser.

§Se l'immagine inserita come sfondo deve rimanere fissa, ovvero non deve scorre insieme alla Pagina nel caso in cui questa sia più lunga di quanto può essere immediatamente visualizzato, attivare l'opzione Immagine di sfondo fissa.
<%%EXTOGGLE> How To: Come impostare lo sfondo diverso per il contenuto di una specifica Pagina del Sito

Un altro elemento che viene definito dal Modello scelto (vedere, Scelta del Modello) ma che può essere personalizzato per Pagine specifiche è lo sfondo del contenuto della Pagina, ovvero l'area destinata ad ospitare il contenuto vero e proprio delle Pagine.

Clicca per espandere/ridurre
Esempio

Perché una determinata Pagina abbia uno sfondo dell'area dei contenuti diverso da quello di tutte le altre Pagine del Sito è necessario:

§Al Passo 2 - Creazione della Mappa, selezionare la Pagina su cui si vuole agire.

§Cliccare sul pulsante Proprietà... per richiamare la finestra Proprietà Pagina e aprire la sezione Grafica.

§In Contenuto della Pagina solo per questa Pagina utilizzare l'opzione File Immagine per importare l'immagine da utilizzare come sfondo. Se necessario utilizzare le opzioni Disposizione e Allineamento per posizionare correttamente l'immagine.

Clicca per espandere/ridurre How To: Come creare una pagina di approfondimento in popup

A volte si ha l'esigenza di creare una pagina in cui presentare dei brevi contenuti di approfondimento o una form che, pur facendo parte del Sito, si apra in una finestra di popup di dimensioni definite e non abbia applicati gli elementi del Modello grafico scelto.

Clicca per espandere/ridurre
Esempio - Pagina visualizzata in popup

Per ottenere questo risultato è necessario:

§Creare normalmente la Pagina di approfondimento inserendo i contenuti che deve presentare.

§Al Passo 2 - Creazione della Mappa, selezionare la Pagina di approfondimento, cliccare sul pulsante Proprietà... per richiamare la finestra Proprietà Pagina e aprire la sezione Grafica.

§Attivare l'opzione Crea la Pagina senza applicare il Modello e specificare la Larghezza Pagina in pixel.

§Selezionare l'elemento (per esempio, il testo) su cui inserire il link che deve portare all'apertura della Pagina di approfondimento e cliccare sul pulsante [image] per richiamare la finestra Collegamento.

§Scegliere l'azione Pagina del Sito, selezionare la pagina di approfondimento preparata e spuntare l'opzione Apri in una finestra popup specificando le dimensioni in pixel della finestra (attenzione a riportare la stessa larghezza specificata per la creazione della Pagina).
Clicca per espandere/ridurre How To: Come inserire delle icone a fianco delle voci del Menu di navigazione

Al pari di quanto avviene in un comune elenco puntato, le voci del Menu di navigazione possono essere affiancate da un'icona o da un'immagine di dimensioni adeguate.

Clicca per espandere/ridurre
Esempio - Icone voci Menu

Se si vuole fare in modo che a tutte le voci del Menu sia associata la stessa icona è necessario agire sugli Stili del Menu a Comparsa e del Menu di Pagina:

§Al Passo 4 - Impostazioni Avanzate, aprire Stile del Menu a Comparsa | Voci Menu e selezionare l'immagine da utilizzare come Icona punto elenco.

§Sempre al Passo 4 - Impostazioni Avanzate, aprire Stile del Menu di Pagina | Voci Menu e selezionare l'immagine da utilizzare come Icona punto elenco.

Se si vuole associare un'icona particolare a una determinata voce del Menu di navigazione occorre sfruttare le Proprietà della Pagina o del Livello (a seconda dell'elemento a cui corrisponde la voce sulla Mappa):

§Al Passo 2 - Creazione della Mappa, selezionare la Pagina o il Livello su cui si vuole agire.

§Se si lavora su una Pagina, cliccare sul pulsante Proprietà... per richiamare la finestra Proprietà Pagina, aprire la sezione Grafica e selezionare l'immagine da utilizzare come Icona da visualizzare sul Menu.

§Analogamente se si lavora su un Livello, cliccare sul pulsante Proprietà... per richiamare la finestra Proprietà Livello e selezionare l'immagine da utilizzare come Icona da visualizzare sul Menu.

Naturalmente è possibile definire delle impostazioni base lavorando sugli Stili dei Menu e poi gestire dei casi particolari lavorando sulle Proprietà di singole Pagine/Livelli.


griglia_ht_new

Come impostare una Pagina attraverso la Griglia di impaginazione

Best Practice > Passo 3 - Creazione della Pagina >

Come impostare una Pagina attraverso la Griglia di impaginazione

 Return to chapter overview
Mostra/Nascondi testo nascosto

WebSite X5 propone un sistema di impaginazione unico grazie al quale si giunge a creare le Pagine in modo completamente visuale.

In pratica, la Pagina viene rappresentata da una Griglia di cui è possibile stabilire il numero di righe e colonne in modo da predisporre le Celle necessarie per ospitare i contenuti.

Attraverso il semplice Drag&Drop degli Oggetti disponibili è, poi, possibile procedere all'inserimento effettivo dei contenuti.

Clicca per espandere/ridurre Reference: Come impostare la Griglia di impaginazione

Partendo dalla Griglia proposta di default, composta da 2 righe per 2 colonne, occorre aggiungere un numero di righe e di colonne sufficienti per ospitare tutti i contenuti della Pagina e, in secondo luogo, inserire nelle Celle gli Oggetti necessari.

Per aggiungere righe e colonne è sufficiente utilizzare i pulsanti [image] [image] presenti nella Barra Strumenti. Si possono creare griglie con un massimo di 64 righe e di 12 colonne.

In automatico, tutte le righe e le colonne della Griglia di impaginazione hanno la stessa larghezza e altezza. È possibile impostare manualmente il valore assoluto (in pixel) o relativo (in percentuale) delle colonne agendo sui cursori presenti sul fondo della Griglia di impaginazione:

§Cliccando e trascinando un cursore, si sposta la linea che delimita la colonna. In questo modo la colonna assume la larghezza specificata nella nota visualizzata durante il trascinamento del cursore. Tenendo premuto il tasto CTRL durante il trascinamento del cursore, lo si sposta di un pixel per volta: in caso contrario, lo spostamento avviene con un passo pari a un decimo della spazio disponibile.

Clicca per espandere/ridurre

§Cliccando con il tasto destro del mouse su un cursore e scegliendo Imposta Larghezza Colonna dal menu contestuale, si può digitare direttamente il valore in pixel della larghezza della colonna.

Clicca per espandere/ridurre

§Cliccando con il tasto destro del mouse su un cursore e scegliendo Reimposta larghezza Colonne uguali dal menu contestuale, si riportano tutte le colonne alla stessa larghezza.
Clicca per espandere/ridurre Reference: Come inserire i contenuti nelle Griglia

Definita la Griglia di impaginazione è possibile inserire un Oggetto selezionando l'icona che lo rappresenta dall'elenco degli Oggetti disponibili, trascinandolo e rilasciandola in corrispondenza della Cella che deve occupare.

Ciascuna Cella della Griglia di impaginazione può contenere un unico Oggetto, ma un Oggetto può occupare più Celle adiacenti sia in senso orizzontale che verticale. L'icona dell'Oggetto selezionato può essere, infatti, trascinata in corrispondenza dei bordi delle Celle: in questi casi l'Oggetto occuperà lo spazio delle Celle interessate. In più, è possibile agire sulle ancore di selezione dell'Oggetto inserito per estenderlo su più Celle.

Una volta definito il numero di Celle che deve essere occupato da un Oggetto, questo viene mantenuto, compatibilmente con la presenza di altri Oggetti, anche se l'Oggetto viene spostato in altri punti della Griglia. Per maggior comodità, è possibile lavorare sulla Griglia utilizzando i tasti freccia:

§tasti freccia: spostano la selezione da una Cella all'altra della Griglia di impaginazione.

§CTRL + tasti freccia: spostano l'Oggetto selezionato (mantenendone le dimensioni) fra le Celle della Griglia di impaginazione.

§SHIFT + tasti freccia: modificano le dimensioni dell'Oggetto selezionato estendendole (compatibilmente con altri Oggetti presenti) o comprimendole su un numero diverso di Celle della Griglia di impaginazione.

Cliccando con il tasto destro del mouse sull'icona dell'Oggetto inserito in una Cella, o in una Cella vuota della Griglia di impaginazione, viene richiamato un menu contestuale con i comandi Taglia, Copia, Incolla, Rimuovi, Proprietà della Cella, Inserisci Riga, Inserisci Colonna, Rimuovi Riga e Rimuovi Colonna.

Tramite questi comandi è possibile, per esempio, creare una copia di un Oggetto incollandolo in un'altra Cella o in un'altra Pagina, o eliminarlo. Un Oggetto inserito può essere rimosso dalla Pagina anche trascinandolo all'esterno della Griglia di impaginazione o attraverso il tasto CANC. In qualsiasi caso, inserendo un nuovo Oggetto in una Cella già occupata, si ottiene automaticamente la cancellazione del primo Oggetto e la sua sostituzione con il secondo. Se, però, si trascina un Oggetto già esistente su una Cella già occupata, i due Oggetti vengono scambiati di posizione.

I comandi Copia stile e Incolla stile, presenti nel sotto-menu richiamato dal comando Stile della Cella, permettono invece di fare in modo che le impostazioni definite nella finestra Stile della Cella per una Cella vengano automaticamente applicate anche ad una seconda Cella.

Dopo aver inserito un Oggetto si può richiamare la finestra attraverso la quale procedere all'effettiva definizione del suo contenuto (Oggetto Testo, Oggetto Immagine, Oggetto Tabella, Oggetto Galleria, Oggetto Video/Suono, Oggetto Modulo Invio E-mail, Oggetto Guestbook, Oggetto Social Network, Oggetto Mappa, Oggetto Animazione Flash, Oggetto Elenco Prodotti, Oggetto HTML e Widgets), facendo doppio click sulla Cella della Griglia di impaginazione che lo contiene o selezionando l'Oggetto e cliccando sul pulsante [image] Contenuto Oggetto.

Non è obbligatorio riempire tutte le Celle della Griglia di impaginazione: si deve considerare, però, che una Cella vuota corrisponderà ad uno spazio vuoto nella Pagina.

Per meglio comprendere come sfruttare al meglio le possibilità di impaginazione, occorre ricordare che il funzionamento del software si attiene alle seguenti regole:

§La larghezza della Pagina è determinata dal Modello.

§La larghezza delle colonne della Griglia di impaginazione è ottenuta dividendo la larghezza della Pagina per il numero delle colonne inserite. Di default, tutte le colonne hanno uguale larghezza ma è poi possibile modificare manualmente tale parametro.

§Tutte le Celle disposte in una stessa riga della Griglia di impaginazione hanno uguale altezza: di default, questo valore è determinato dall'Oggetto più alto fra quelli contenuti in tali Celle.

§Gli Oggetti inseriti vengono automaticamente ridimensionati in base alle dimensioni assunte dalle Celle della Griglia di impaginazione.

Approfondimenti:

-

Il Box Model in WebSite X5


ogg_testo_ht

Come lavorare con Oggetto Testo

Best Practice > Passo 3 - Creazione della Pagina >

Come lavorare con Oggetto Testo

 Return to chapter overview
Mostra/Nascondi testo nascosto

Facendo doppio click su un Oggetto Testo inserito all'interno della Griglia di impaginazione o selezionandolo e cliccando sul pulsante [image], si accede alla finestra Oggetto Testo. Attraverso questa finestra, che propone un editor, è possibile procedere direttamente alla digitazione e alla formattazione dei testi.

Clicca per espandere/ridurre How To: Come creare un testo con barra di scorrimento

Inserendo un Oggetto Testo in una Pagina, questo assume in automatico un'altezza tale da permettere la visualizzazione dell'intero contenuto. Se il testo è abbastanza lungo e lo si vuole visualizzare in una finestra di dimensioni contenute, è possibile impostare l'altezza desiderata e forzare la visualizzazione della barra di scorrimento.

§Inserire in una Pagina un Oggetto Testo, quindi accedere alla finestra Oggetto Testo per digitare e formattare il testo.

§Cliccare sul pulsante [image] per richiamare la finestra RollOver.

§Attivare l'opzione Abilita RollOver e impostare come Movimento l'opzione Nessuno - Mostra barra di scorrimento.

§Impostare il valore in pixel desiderato per l'Altezza.
Clicca per espandere/ridurre How To: Come creare un testo scorrevole

Un modo per presentare, per esempio, una lista di notizie è quello di farla scorrere come i titoli di un telegiornale, o in senso orizzontale o in senso verticale.

§Inserire in una Pagina un Oggetto Testo, quindi accedere alla finestra Oggetto Testo per digitare e formattare il testo.

§Cliccare sul pulsante [image] per richiamare la finestra RollOver.

§Attivare l'opzione Abilita RollOver e impostare come Movimento, per esempio, l'opzione Scorrimento singolo specificandone la Direzione.

§Definire l'effetto attraverso i parametri disponibili e attivare l'opzione Ferma il movimento al passaggio del mouse: in questo modo se sui titoli delle notizie è impostato un link di approfondimento, il Visitatore può bloccare l'effetto di scorrimento e cliccare sulla notizia che desidera leggere.


ogg_immagine_ht

Come lavorare con l'Oggetto Immagine

Best Practice > Passo 3 - Creazione della Pagina >

Come lavorare con l'Oggetto Immagine

 Return to chapter overview
Mostra/Nascondi testo nascosto

Facendo doppio click su un Oggetto Immagine inserito all'interno della Griglia di impaginazione o selezionandolo e cliccando sul pulsante [image], si accede alla finestra Oggetto Immagine. Attraverso questa finestra è possibile specificare il file da importare, definirne le proprietà, impostare effetti di zoom e panoramica, decidere se includerlo nella SiteMap e, in caso positivo, inserire le informazioni necessarie.

Clicca per espandere/ridurre How To: Come modificare un'immagine

WebSite X5 permette di importare tutti i più diffusi formati grafici e procede automaticamente all'ottimizzazione delle immagini utilizzate, ridimensionandole in base alle dimensioni della Cella della Griglia di impaginazione in cui sono inserite e salvandone una copia in formato compresso (in base al fattore di Qualità impostato in Oggetto Immagine | Visualizzazione).

WebSite X5 mette anche a disposizione un versatile Editor interno attraverso il quale è possibile portare a termine le più comuni operazioni di editing:

§Selezionare l'Immagine su cui si vuole lavorare (Oggetto Immagine, Oggetto Galleria, Carrello e-commerce | Impostazioni Prodotto | Immagine).

§Cliccare sul pulsante Modifica... disponibile.

§Utilizzare le opzioni messe a disposizione dall'Editor Immagine per tagliare, ruotare, modificare l'Immagine applicando filtri, cornici, ecc.

§Se necessario, creare una copia dell'immagine originale utilizzando il comando Salva come....

Clicca per espandere/ridurre How To: Come creare un'immagine panoramica

Le fotografie panoramiche sono molto belle da vedere ma non sempre in una Pagina Web si ha lo spazio sufficiente per inserirle nelle loro reali dimensioni.

Una soluzione molto comune è di inserirle in una finestra più piccola e di lasciare che il Visitatore scopra le parti nascoste muovendo le immagini.

§Preparare un'immagine panoramica che si sviluppa, per esempio, in orizzontale e che ha, dunque, una larghezza molto superiore all'altezza.

§Inserire un Oggetto Immagine e importare il file relativo all'immagine panoramica.

§In Oggetto Immagine | Visualizzazione impostare come Modalità di visualizzazione lo Zoom e spostamento manuale dell'Immagine o lo Zoom e spostamento automatico dell'Immagine quindi selezionare come Modalità di spostamento la Foto panoramica orizzontale.

§Impostare la reale Altezza dell'immagine.

§Può essere utile attivare anche l'opzione Mostra il navigatore per permettere al Visitatore di avere un'anteprima navigabile dell'immagine panoramica completa.

In maniera del tutto analoga è possibile creare anche Immagini panoramiche che si sviluppano in verticale, piuttosto che in orizzontale.
Clicca per espandere/ridurre How To: Come creare un pulsante utilizzando l'effetto mouseover sull'Immagine

Un effetto che può rivelarsi tanto piacevole da vedere quanto utile nell'interazione è quello associato al passaggio del mouse (effetto mouseover). WebSite X5 consente di applicare diversi tipi di effetti di mouseover sulle Immagini e di personalizzarli. I casi in cui impiegarli sono svariati: il più comune è quello in cui si vuole creare un pulsante con gli stati "rilasciato" e "premuto".

§Preparare due Immagini idonee per rappresentare il pulsante nello stato "rilasciato" e nello stato "premuto".

§Inserire un Oggetto Immagine e importare il file relativo all'immagine nello stato "rilasciato".

§In Oggetto Immagine | Visualizzazione selezionare "Immagine sovrapposta" come Effetto su passaggio del mouse e importare il file relativo all'immagine nello stato "premuto". In questo caso le due immagini dovrebbero avere le stesse dimensioni per cui non occorre allinearle.

§Completare il pulsante impostando il collegamento: tornare in Oggetto Immagine | Generale e cliccare su [image] per richiamare la finestra Collegamento e selezionare l'azione appropriata.

Utilizzando altri tipi di effetto mouseover si può mettere semplicemente in evidenza l'immagine, portare alla visualizzazione di scritte o pulsanti che spiegano funzioni attivabili come, per esempio, una lente di ingrandimento che indica la possibilità di zoomare o un pulsante Play che invita ad avviare un video.
Clicca per espandere/ridurre How To: Come proteggere un'immagine dalla copia non autorizzata

È relativamente semplice appropriarsi di un'Immagine pubblicata all'interno di una Pagina Web. WebSite X5 mette a disposizione due diversi sistemi per cercare di proteggere le Immagini dalla copia non autorizzata:

1. Disabilitando i comandi del menu contestuale del Browser:

·Selezionare l'Immagine e accedere alla finestra Oggetto Immagine | Visualizzazione.

·Attivare l'opzione Proteggi Immagine dalla copia.

2. Inserendo sull'Immagine una filigrana:

·Selezionare l'Immagine, accedere alla finestra Oggetto Immagine | Generale e cliccare sul pulsante Modifica... per richiamare l'Editor Immagine.

·Aprire la sezione Filigrana e selezionare dalla lista proposta l'immagine da applicare come filigrana.


ogg_video_ht

Come lavorare con l'Oggetto Video/Suono

Best Practice > Passo 3 - Creazione della Pagina >

Come lavorare con l'Oggetto Video/Suono

 Return to chapter overview
Mostra/Nascondi testo nascosto

Facendo doppio click su un Oggetto Video/Suono inserito all'interno della Griglia di impaginazione o selezionandolo e cliccando sul pulsante [image], si accede alla finestra Oggetto Video/Suono. Attraverso questa finestra è possibile specificare il file da importare, definirne le proprietà, decidere se includerlo nella SiteMap e, in caso positivo, inserire le informazioni necessarie.

Clicca per espandere/ridurre How To: Come inserire un Video pubblicato su YouTube™

In molti casi il Video da inserire all'interno di una Pagina Web non è un file salvato in locale sul PC ma un documento che è già stato pubblicato su una piattaforma online come YouTube™ o Vimeo.

In questi casi si possono seguire due strade per importare il Video:

1. Utilizzando l'Oggetto Video/Suono

§Aprire YouTube™ e visualizzare il Video da importare.

§Cliccare sul pulsante Condividi (presente sotto l'anteprima del video) per personalizzare la URL e copiarla (tramite il comando Copia del menu contestuale o la combinazione di tasti CTRL+C) dall'apposito campo.

§In WebSite X5, nella Pagina desiderata, inserire un Oggetto Video/Suono e richiamare la finestra relativa per procedere alla sua composizione.

§In Oggetto Video/Suono | Generale, digitare nel campo URL del Video YouTube/Vimeo l'indirizzo al quale è raggiungibile il Video pubblicato su YouTube™.

§Impostare le Proprietà nella maniera più opportuna.

2.Utilizzando l'Oggetto HTML e Widgets

§Aprire YouTube™ e visualizzare il Video da importare.

§Cliccare sul pulsante Condividi (presente sotto l'anteprima del video) e quindi sul pulsante Codice da incorporare. Selezionare le opzioni desiderate e copiare (tramite il comando Copia del menu contestuale o la combinazione di tasti CTRL+C) il codice proposto dall'apposito campo.

§In WebSite X5, nella Pagina desiderata, inserire un Oggetto HTML e Widgets e richiamare la finestra relativa per procedere alla sua composizione.

§Attraverso il pulsante [image] o la combinazione di tasti CTRL+V, incollare il codice copiato da YouTube™.

Inserendo un Video pubblicato su YouTube™ tramite un Oggetto Video/Suono le dimensioni originarie vengono modificate in base alle impostazioni di WebSite X5. Se si vuole mantenere un maggior controllo, si consiglia di importare il video YouTube™ attraverso l'Oggetto HTML e Widgets.

Clicca per espandere/ridurre How To: Come creare un poster personalizzato per lanciare la riproduzione di un Video

Il poster è l'immagine statica di anteprima di un Video: in genere corrisponde al primo fotogramma ma è possibile pensare anche a poster più creativi, vere e proprie copertine che invitino il Visitatore a cliccare per visualizzare il contributo.

Con WebSite X5 è possibile, per esempio, realizzare un poster personalizzato con effetto di mouseover e link per l'apertura del Video in una finestra ShowBox:

§Con un programma di grafica esterno, preparare le immagini da utilizzare per creare il poster: una per lo stato "normale" e una per lo stato "su passaggio del mouse".

§In WebSite X5, nella Pagina desiderata, inserire un Oggetto Immagine, richiamare la finestra relativa per procedere alla sua composizione e importare l'immagine corrispondente al poster nello stato "normale".

§In Oggetto Immagine | Visualizzazione selezionare "Immagine sovrapposta" come Effetto su passaggio del mouse e importare il file relativo all'immagine nello stato "su passaggio del mouse". In questo caso le due immagini dovrebbero avere le stesse dimensioni per cui non occorre allinearle.

§Completare il pulsante impostando il collegamento: tornare in Oggetto Immagine | Generale, cliccare su [image] per richiamare la finestra Collegamento, selezionare l'azione File o URL con ShowBox e specificare il file Video da importare.


ogg_form_ht

Come lavorare con l'Oggetto Modulo Invio E-mail

Best Practice > Passo 3 - Creazione della Pagina >

Come lavorare con l'Oggetto Modulo Invio E-mail

 Return to chapter overview
Mostra/Nascondi testo nascosto

Facendo doppio click su un Oggetto Modulo Invio E-mail inserito all'interno della Griglia di impaginazione o selezionandolo e cliccando sul pulsante [image], si accede alla finestra Oggetto Modulo Invio E-mail. Attraverso questa finestra è possibile definire i campi di cui il Modulo deve comporsi, la modalità di invio e raccolta dei dati, l'aspetto grafico del Modulo.

Clicca per espandere/ridurre How To: Come comporre un Modulo di iscrizione online

Navigando in Internet, capita spesso di visualizzare pagine contenenti dei moduli di cui viene richiesta la compilazione e l'invio tramite e-mail. Tali moduli vengono utilizzati per richiedere la registrazione a particolari servizi o l'accesso ad aree riservate attraverso password o, più semplicemente, per realizzare sondaggi e ricerche.

Clicca per espandere/ridurre

§Nella Pagina desiderata, inserire un Oggetto Testo, utile per impostare un titolo e/o un invito ad effettuare la registrazione, e di seguito un Oggetto Modulo Invio E-mail.

§In Oggetto Modulo Invio E-mail | Elenco cliccare sul pulsante Aggiungi... e nella finestra Inserimento Campo richiamata selezionare Campo Testo inserendo come Etichetta "Nome", impostando la Larghezza (%) al 50% e attivando l'opzione Imposta come Campo Obbligatorio. Confermando, si crea il primo campo per richiedere il Nome del Visitatore che vuole effettuare la registrazione.

§In Oggetto Modulo Invio E-mail | Elenco cliccare sul pulsante Aggiungi... e nella finestra Inserimento Campo richiamata selezionare Campo Testo inserendo come Etichetta "Nome", impostando la Larghezza (%) al 50% e attivando l'opzione Imposta come Campo Obbligatorio. Confermando, si crea il primo campo per richiedere il Nome del Visitatore che vuole effettuare la registrazione.

§Ripetere la stessa procedura per inserire un secondo Campo Testo per il "Cognome". Perché il campo "Cognome" si affianchi a quello del "Nome", verificare che la larghezza sia compatibile (nell'esempio, 50%) e che sia attiva l'opzione Visualizza nella stessa riga del Campo precedente.

§Per la domanda sul genere di appartenenza, utilizzare il campo Lista: in alternativa si potrebbe impiegare anche un campo Lista a discesa o un campo Scelta Singola.

§Una volta digitata l'Etichetta ("Sesso"), creare l'Elenco delle possibili modalità di risposta: cliccare sul pulsante Aggiungi per inserire le opzioni "Maschio" e "Femmina". È anche possibile impostare il Numero di righe visibili.

§Per la domanda relativa alla "Data di nascita" utilizzare il campo Data.

§Scegliere in quale formato deve essere scritta la data (opzione Formato Data) perché sia accettata. Per facilitare il compito del Visitatore, in questi casi, è possibile attivare l'opzione Mostra icona 'Calendario': posizionando il mouse sull'icona che verrà automaticamente affiancata al campo, il Visitatore potrà visualizzare e utilizzare un calendario per immettere la data senza doverla digitare.

§Per richiedere l'inserimento di un indirizzo E-mail, inserire un campo Posta elettronica. La particolarità di questo campo è che viene effettuato in automatico un controllo sulla correttezza del dato inserito: in pratica viene verificata la presenza del carattere @ e la presenza di un punto nel testo che segue.

§Per permettere al Visitatore di iscriversi occorre dargli la possibilità di specificare quale password intende utilizzare: per questo è necessario inserire un campo Password, specificandone l'Etichetta e attivandolo come obbligatorio.

§Per maggiore sicurezza, è possibile richiedere al Visitatore di digitare una seconda volta la password scelta. Perché venga creato il campo dove re-immettere la password e venga verificata la corrispondenza tra le due password digitate, è sufficiente attivare l'opzione Richiedi conferma correttezza password.

§A conclusione del modulo, è bene inserire un campo Condizioni di Accettazione per presentare il testo delle condizioni che il Visitatore deve accettare per potersi iscrivere al servizio proposto.

§In questo caso è necessario specificare l'Etichetta e inserire il Testo della condizione: il pulsante "Accetto" verrà aggiunto automaticamente dal Programma.

§Infine, per limitare l'invio di spam, è possibile inserire il controllo Captcha spuntando l'opzione Attiva controllo anti-spam 'Captcha': in questo modo, al termine del Modulo viene visualizzata l'immagine distorta di una sequenza di lettere e numeri che il Visitatore deve riscrivere correttamente in un campo per poter procedere all'invio dei dati.

I pulsanti Invia, per l'invio del modulo compilato, e Reset, per cancellare tutti i dati eventualmente inseriti nel modulo, vengono automaticamente creati dal Programma e posizionati al termine della Form.
Clicca per espandere/ridurre How To: Come creare delle note esplicative sui campi

Se si teme che l'Etichetta associata a un campo non sia sufficiente per permettere al Visitatore di compilarlo correttamente e senza incertezze, è possibile comporre una nota con maggiori spiegazioni.

Clicca per espandere/ridurre

§In Oggetto Modulo Invio E-mail | Elenco, nella tabella che riassume tutti i campi inseriti, fare doppio click sul campo su cui si vuole agire in modo da riaprirlo nella finestra richiamata Inserimento Campo.

§In Inserimento Campo | Opzioni digitare la Descrizione del Campo. Questo testo verrà proposto in una nota visualizzata al passaggio del mouse sull'icona che verrà appositamente affiancata al campo in questione.

§Per cambiare l'icona associata alla nota esplicativa utilizzare l'opzione File icona per Descrizione Campo presente nella finestra Oggetto Modulo Invio E-mail | Stile.

§Per agire su forma, colori e formattazioni del testo della nota esplicativa creata, sfruttare le opzioni raccolte nella finestra Stili e Modelli | ToolTip.
Clicca per espandere/ridurre How To: Come impostare l'invio per e-mail dei dati raccolti attraverso un Modulo online

I dati raccolti attraverso un Modulo di iscrizione online devono, ovviamente, essere trasmessi all'Amministratore del Sito. Nella maggior parte dei casi, è sufficiente che i questi dati vengano inviati tramite e-mail: ogni volta che un Visitatore compila il Modulo e clicca sul pulsante Invia, i dati vengono automaticamente inseriti in una e-mail inviata a un indirizzo e-mail specificato.

§In Oggetto Modulo Invio E-mail | Invio, come metodo di Invio dei dati impostare Invia i dati per e-mail.

§Per definire impostazioni e contenuti della e-mail che viene inviata all'Amministratore del Sito, utilizzare le opzioni relative a Invio dei dati.

§Per fare in modo che come Mittente della e-mail figuri direttamente il Visitatore, attivare l'opzione E-mail mittente e indicare il campo del Modulo da cui deve essere ricavato l'indirizzo e-mail. In questo modo sarà possibile utilizzare il comando "Rispondi" del programma di Posta Elettronica per rispondere al Visitatore.

§Specificare E-mail destinatario, ovvero l'indirizzo e-mail sul quale l'Amministratore del Sito deve ricevere queste comunicazioni, l'Oggetto e il Messaggio.

§Attivare l'opzione Includi in coda i dati raccolti in formato CSV per fare in modo che tutti i dati raccolti attraverso il Modulo siano inclusi in coda in formato .CSV (formato accettato da programmi come Microsoft Excel).

Le e-mail con i dati raccolti attraverso un Modulo online vengono create in automatico dal Programma. Per definirne l'aspetto grafico è possibile utilizzare le impostazioni presenti in Stili e Modelli | E-mail.
Clicca per espandere/ridurre How To: Come impostare l'invio a un Database dei dati raccolti attraverso un Modulo online

Se si prevede che un Modulo verrà compilato da un elevato numero di Visitatori, inviare per e-mail i dati raccolti può non essere la soluzione più vantaggiosa: l'Amministratore del Sito rischia di ricevere molte e-mail e di dover procedere manualmente all'inserimento dei dati in tabelle. In questi casi, è più indicato predisporre l'invio dei dati direttamente a un Database: in questo modo i dati vengono automaticamente collezionati nelle Tabelle predefinite e sono pronti per i trattamenti successivi.

§Al Passo 4 - Impostazioni Avanzate, cliccare su Gestione Dati in modo da predisporre la lista dei Database collegati al Progetto corrente.

§Cliccare sul pulsante Aggiungi... per aprire la finestra Impostazioni Database e specificare i parametri necessari per identificare il Database.

§Tornare al Passo 3 - Creazione della Pagina, selezionare l'Oggetto Modulo Invio E-mail su cui lavorare e aprire la finestra Oggetto Modulo Invio E-mail | Invio.

§Impostare Invia i dati ad un Database come metodo di Invio dei dati.

§Specificare il Nome Database selezionandolo dalla lista: questa lista ripropone tutti i Database collegati al Progetto in Gestione Dati.

§Specificare il Nome Tabella del Database da utilizzare.

§Per fare in modo che l'Amministratore del Sito riceva una e-mail che notifica la ricezione di nuovi dati, attivare l'opzione Invia e-mail di notifica di ricezioni dati specificando l'indirizzo e-mail a cui inviare la notifica nel campo E-mail destinatario.

Le e-mail con i dati raccolti attraverso un Modulo online vengono create in automatico dal Programma. Per definirne l'aspetto grafico è possibile utilizzare le impostazioni presenti in Stili e Modelli | E-mail.
Clicca per espandere/ridurre How To: Come impostare una e-mail di risposta automatica per l'Utente che ha compilato un Modulo online

Compilato un Modulo online e inviati i dati, il Visitatore si aspetta di ricevere un feedback sull'esito dell'operazione: è buona norma ringraziarlo per il tempo che ha dedicato e rassicurarlo che tutto si è svolto correttamente inviandogli una e-mail di conferma.

Per impostare l'e-mail di conferma è sufficiente:

§In Oggetto Modulo Invio E-mail | Invio attivare l'opzione Invia e-mail di conferma all'Utente che compila il modulo.

§In questo caso, è necessario immettere come E-mail mittente un indirizzo e-mail dell'Amministratore del Sito e specificare da quale campo del Modulo ricavare l'E-mail destinatario, ovvero del Visitatore che ha compilato il Modulo stesso.

§Per completare l'e-mail di conferma occorre poi specificare un Oggetto e comporre Messaggio.

§Infine, è possibile attivare l'opzione Includi in coda i dati raccolti per ricordare al Visitatore i dati che ha fornito compilando il Modulo.

Per quanto riguarda la Pagina di Conferma, è consigliabile creare una Pagina di ringraziamento ad hoc, piuttosto che rimandare genericamente alla Home Page del Sito.

§Al Passo 2 - Creazione della Mappa creare una nuova Pagina inserendo tutti i contenuti necessari.

§Selezionare la Pagina di conferma sulla Mappa e cliccare sul pulsante [image] in modo da renderla non visibile sul Menu di navigazione.

§Tornare al Passo 3 - Creazione della Pagina, selezionare l'Oggetto Modulo Invio E-mail su cui lavorare e aprire la finestra Oggetto Modulo Invio E-mail | Invio.

§Cliccare sul pulsante [image] dell'opzione Pagina di Conferma dopo l'invio dei dati per richiamare la Mappa e selezionare la Pagina di conferma preparata.

Le e-mail con i dati raccolti attraverso un Modulo online vengono create in automatico dal Programma. Per definirne l'aspetto grafico è possibile utilizzare le impostazioni presenti in Stili e Modelli | E-mail.
Clicca per espandere/ridurre How To: Come modificare impaginazione e grafica di un Modulo online

Dopo aver definito la composizione del Modulo e i metodi di invio dei dati raccolti, è possibile agire sull'impostazione grafica del Modulo stesso al fine di renderlo non solo più bello ma anche più funzionale ed aumentare, così, le probabilità che i Visitatori siano incentivati a compilarlo.

§Selezionare l'Oggetto Modulo Invio E-mail su cui lavorare e aprire la finestra Oggetto Modulo Invio E-mail | Stile.

§Selezionare l'Elemento del Modulo su cui agire (dall'apposita lista a discesa o direttamente sull'Anteprima) e definire le impostazioni relative: formattazioni, immagini e colori.

§Per le Etichette di testo, per esempio, è possibile impostare Tipo di Font, Colore del testo e Disposizione rispetto ai campi.

§Per i Pulsanti di 'Invio' e 'Reset', invece, è possibile importare anche un'Immagine di sfondo in modo da personalizzarli completamente.

Tutte le modifiche apportate sono immediatamente visibili nell'Anteprima.

Quando si testa il funzionamento del Sito creato in locale, una finestra d'avviso avverte che le e-mail con i dati raccolti attraverso il Modulo non verranno inviate. Il Modulo Invio E-mail funziona pienamente solo con la pubblicazione del Sito su Server.


ogg_elenco_ht

Come lavorare con l'Oggetto Elenco Prodotti

Best Practice > Passo 3 - Creazione della Pagina >

Come lavorare con l'Oggetto Elenco Prodotti

 Return to chapter overview
Mostra/Nascondi testo nascosto

Facendo doppio click su un Oggetto Elenco Prodotti inserito all'interno della Griglia di impaginazione o selezionandolo e cliccando sul pulsante [image], si accede alla finestra Oggetto Elenco Prodotti. Attraverso questa finestra è possibile creare la lista di tutti i Prodotti che si vogliono presentare e definire la modalità di visualizzazione delle relative Schede Prodotto.

Clicca per espandere/ridurre How To: Come definire quali Prodotti devono essere inclusi in un Oggetto Elenco Prodotti

Attraverso un unico Oggetto Elenco Prodotti è possibile presentare un numero variabile di Prodotti: non è necessario stabilire questo numero a priori, semplicemente verrà creata una scheda di presentazione per ogni Prodotto incluso e questa scheda sarà aggiunta all'interno della stessa Pagina.

§Dopo aver creato almeno il catalogo dei Prodotti al Passo 4 - Carrello e-commerce, tornare al Passo 2 - Creazione della Mappa, selezionare la Pagina su cui si intende lavorare e inserire un Oggetto Elenco Prodotti all'interno della Cella più opportuna della Griglia di impaginazione.

§Fare doppio click sull'Oggetto inserito e accedere alla finestra Oggetto Elenco Prodotti | Elenco.

§L'Elenco Categorie e Prodotti presenta tutti i Prodotti inseriti nel Carrello, ordinati in Categorie. E' possibile:

-Cliccare (in modo da visualizzare un segno di spunta) in corrispondenza di tutti i Prodotti singoli che si intendono includere.

-Cliccare in corrispondenza di una Categoria in modo da includere automaticamente tutti i Prodotti che comprende. Agendo in questo modo, aggiornando la composizione della Categoria si modificherà anche l'Oggetto Elenco Prodotti.
Clicca per espandere/ridurre How To: Come impostare la grafica delle Schede Prodotto

Ogni Prodotto incluso in un Oggetto Elenco Prodotti viene presentato attraverso una scheda creata in automatico dal Programma. Per definire quali elementi e quali caratteristiche devono avere le Schede, occorre:

§Accedere alla finestra Oggetto Elenco Prodotti | Impostazioni e, innanzitutto, scegliere il Tipo di visualizzazione. Per esempio, selezionando Immagine e Testo, in ogni scheda verranno visualizzati sulla sinistra l'immagine del Prodotto e sulla destra tutte le informazioni ad esso relative.

§Utilizzare le opzioni disponibili per impostare proporzioni, colori, margini e bordi.

§Definire se nelle schede devono essere inclusi elementi come il Prezzo o il Campo Quantità.

Le schede create dall'Oggetto Elenco Prodotti rappresentano un modo veloce ed efficace di presentare i Prodotti a catalogo sullo store online del Sito. In alternativa, è possibile creare manualmente delle Pagine di presentazione dei Prodotti in cui, ovviamente, occorre ricordare di prevedere i necessari pulsanti "Acquista".

Best practice:

-

Come creare un Carrello di e-commerce


ancore_ht

Come creare e utilizzare le Ancore

Best Practice > Passo 3 - Creazione della Pagina >

Come creare e utilizzare le Ancore

 Return to chapter overview
Mostra/Nascondi testo nascosto

L'Ancora è un riferimento che serve per identificare la posizione di un Oggetto all'interno della Pagina: viene utilizzata per impostare collegamenti diretti all'Oggetto stesso da un qualsiasi altro punto del Sito.

Non ci sonno limiti al numero di Ancore inseribili in una Pagina: teoricamente, a ogni Oggetto presente può essere associata un'Ancora. Per semplificare il lavoro, si consiglia di assegnare un'Ancora ad un Oggetto solo se necessario e di dare alle Ancore dei nomi significativi in modo da poterle identificare agevolmente.

Clicca per espandere/ridurre How to: Come creare un collegamento interno alla Pagina attraverso le Ancore

A volte può essere utile impostare dei collegamenti che, facendo semplicemente scorrere la Pagina, portano in primo piano un particolare contenuto: può servire, per esempio, per creare una breve sommario iniziale su cui cliccare per saltare direttamente ai contenuti presentati, uno dopo l'altro, nel seguito.

Clicca per espandere/ridurre

§Al Passo 3 - Creazione della Pagina creare la Pagina inserendo tutti gli Oggetti necessari per presentare tutti i contenuti: prevedere un Oggetto Testo iniziale per il sommario e un Oggetto Testo per ogni contenuto da collegare alle diversi voci del sommario.

§Sulla Griglia di impaginazione, selezionare l'Oggetto Testo relativo al primo contenuto e cliccare sul pulsante [image] in modo da assegnargli un'Ancora: attraverso la finestra richiamata, specificare un nome adeguato per l'Ancora.

§Allo stesso modo, assegnare un'Ancora a ogni altro Oggetto Testo relativo ai contenuti da richiamare, avendo cura di dare dei nomi diversi e significativi.

§Fare doppio click sull'Oggetto Testo relativo al sommario iniziale in modo da aprirlo nell'editor.

§Selezionare la prima voce del sommario e cliccare sul pulsante [image] in modo da richiamare la finestra Collegamento: scegliere l'azione Pagina del Sito e utilizzare il pulsante [image] per visualizzare la Mappa e selezionare la Pagina stessa sulla quale si sta lavorando. Cliccare sul campo Ancora interna alla Pagina in modo da visualizzare quelle disponibili e selezionare l'Ancora che identifica il contenuto relativo alla voce del sommario.

§Ripetere l'operazione in modo da creare il collegamento su tutte le voci del sommario.

È possibile perfezionare la navigazione inserendo al termine di ogni blocco di contenuto un link per tornare velocemente al sommario all'inizio della Pagina:

§Tramite il pulsante [image] assegnare un'Ancora anche all'Oggetto Testo relativo al sommario iniziale.

§Aprire nell'editor l'Oggetto Testo relativo al primo blocco di contenuto e aggiungere al fondo una scritta come: "Torna all'inizio".

§Selezionare la voce "Torna all'inizio" e cliccare sul pulsante [image] in modo da impostare un collegamento con la Pagina, avendo cura di specificare l'Ancora associata al sommario.

§Ripetere l'operazione in modo da inserire la voce attiva "Torna all'inizio" al termine di tutti i blocchi di contenuto.

Al posto della voce "Torna all'inizio" è possibile prevedere un pulsante grafico che può essere creato o inserendo un'immagine direttamente all'interno dell'Oggetto Testo o utilizzando un Oggetto Immagine (con il vantaggio di poter sfruttare gli effetti di mouseover): in qualsiasi caso la procedura per la creazione del collegamento non cambia.

Clicca per espandere/ridurre How To: Come creare e gestire delle Ancore create manualmente

Se si ha l'esigenza di posizionare un'Ancora non all'inizio di un Oggetto ma al suo interno, per esempio in corrispondenza di un certo paragrafo di un Oggetto Testo, è possibile agire un due diversi modi:

1. Dividere l'Oggetto Testo originario, in due diversi Oggetti Testo in modo da poter associare l'Ancora al secondo.

2. Creare manualmente un'Ancora all'interno dell'Oggetto Testo.

§Aprire l'Oggetto Testo nell'editor e cliccare sul pulsante [image] in modo da attivare il riconoscimento del codice HTML.

§Posizionarsi nel punto in cui si vuole inserire l'ancora e digitare: <A NAME="nome_ancora">&nbsp; </A>

Ovviamente al posto di "nome_ancora" occorre scrivere il nome che si vuole realmente dare all'Ancora. Nell'esempio "&nbsp;" identifica uno spazio vuoto introdotto con lo scopo di fornire un contenuto per il tag.

Quando si imposta il collegamento che punta a un'Ancora occorre considerare che le Ancore create manualmente non vengono riprese nell'elenco proposto dall'opzione Ancora interna alla Pagina. Per questo motivo è necessario:

§Nella finestra Collegamento selezionare l'azione File o URL.

§Nel campo File su Internet digitare: #nome_ancora

Ovviamente al posto di "nome_ancora" occorre scrivere il nome dato all'Ancora.


aspetto_cella_ht

Come lavorare sullo Stile della Cella

Best Practice > Passo 3 - Creazione della Pagina >

Come lavorare sullo Stile della Cella

 Return to chapter overview
Mostra/Nascondi testo nascosto

Lavorando alla Creazione della Pagina, dopo aver trascinato uno degli Oggetti disponibili all'interno di una Cella della Griglia di impaginazione, è possibile definire l'aspetto grafico di tale Cella cliccando sul pulsante [image] e utilizzando le opzioni proposte dalla finestra Stile della Cella richiamata.

Clicca per espandere/ridurre How To: Come creare un'immagine di sfondo che si adatta alle dimensioni della Cella

L'aspetto della Cella può essere personalizzato in diversi modi: fra le altre cose è possibile importare un'immagine (file in formato .JPG, .GIF, .PNG) e utilizzarla come sfondo della Cella stessa. A seconda del tipo di immagine importata sarà necessario scegliere l'opzione Cella con immagine di sfondo, definendo impostazioni diverse per le voci Disposizione e Allineamento, o utilizzare l'opzione Cella con immagine adattata, in modo da riuscire ad ottenere il risultato migliore.

Esempio 1

L'immagine importata è delle stesse dimensioni della Cella.

Sfondo: Cella con immagine di sfondo

Disposizione: Non ripetere

Allineamento: Alto-Sinistra

Clicca per espandere/ridurre

Esempio 2

L'immagine importata è un pattern, ovvero un'immagine creata in maniera tale che unendone due o più uguali, sia in orizzontale che in verticale, non si nota in punto di congiunzione.

Sfondo: Cella con immagine di sfondo

Disposizione: Ripeti in entrambe le direzioni

Allineamento: Alto-Sinistra

Clicca per espandere/ridurre

Esempio 3

L'immagine importata è quella di una cornice che si dovrà adattare a Celle di dimensioni diverse.

Sfondo: Cella con immagine adattata

Larghezza blocco / Altezza blocco: impostare le dimensioni dei blocchi più opportune.

Clicca per espandere/ridurre

Per meglio comprendere come opera l'opzione Cella con immagine adattata, cosa siano i blocchi e come impostarne correttamente le dimensioni, si considerino le seguenti immagini:

Immagine 1 | Immagine 2 | Immagine 3

L'immagine originale (Immagine 1) mostra una cornice molto elaborata ma che ben si presta ad essere tagliata in blocchi e ad adattarsi a qualsiasi dimensione la Cella assuma: gli elementi ornamentali aggiunti negli angoli occupano, infatti, un'area ben definita e facilmente delimitabile e tutte le sfumature possono essere ripetute come un pattern senza che si verifichino bruschi cambi di tonalità.

Nell'Immagine 2 si vedono i blocchi di cui occorre impostare le dimensioni (opzioni Larghezza blocco e Altezza blocco). I valori della larghezza e dell'altezza dei blocchi (tutti uguali fra loro) vengono definiti in percentuale rispetto alla larghezza e all'altezza dell'immagine originale e possono variare fra il 5% e il 45%. In questo caso, occorre impostare la dimensione del taglio al 35% per entrambe i lati dei blocchi perché comprendano completamente l'immagine posizionata sugli angoli.

Come di vede nell'Immagine 3, identificando i blocchi A, B, C, D è possibile ricavare altre 5 sezioni, a, b, c, d, e: questi sono i tagli che vengono effettuati dal Programma per ricavare dall'immagine originale tutte le immagini necessarie per comporre lo sfondo della Cella. Quindi, mentre le immagini corrispondenti ai blocchi A, B, C, D vengono mantenute così come sono e semplicemente posizionate agli angoli, le immagini corrispondenti alle sezioni, a, b, c, d, e vengono ripetute in modo da riempire tutto lo spazio necessario.

Come è facile da comprendere, questa procedura permette una notevole flessibilità: partendo da un'unica immagine adeguatamente realizzata, infatti, è possibile risolvere l'aspetto di Celle anche con dimensioni fra loro molto diverse.

Clicca per espandere/ridurre How To: Come utilizzare la Libreria degli Stili della Cella

Grazie alla Libreria è possibile ridurre i tempi di lavoro: se si prevede di dover dare a più Celle le stesse impostazioni grafiche, è conveniente definirle per la prima Cella, salvare lo Stile e applicarlo, senza ricrearlo tutte le volte, alle altre Celle.

Per creare un nuovo Stile:

§Nella Griglia di impaginazione selezionare la Cella sulla quale si intende lavorare e cliccare sul pulsante [image] per richiamare la finestra Stile della Cella.

§Utilizzare le opzioni messe a disposizione nelle diverse sezioni Stile e Testi per ottenere il risultato desiderato.

§Aprire la sezione Libreria e cliccare sul pulsante Aggiungi: in base alle impostazioni definite viene creato uno nuovo Stile. Un'anteprima dello Stile creato viene aggiunta alla lista degli Stili Personali.

Per applicare uno Stile:

§Nella Griglia di impaginazione selezionare la Cella sulla quale si intende lavorare e cliccare sul pulsante [image] per richiamare la finestra Stile della Cella.

§Aprire direttamente la sezione Libreria e selezionare l'anteprima dello Stile che si vuole utilizzare, scegliendolo nella lista degli Stili Predefiniti o in quella degli Stili Personali.

§Cliccare sul pulsante Applica.

Approfondimenti:

-

Il Box Model in WebSite X5


Come WebSite X5 gestisce le Lingue

Come creare un Sito multi-lingua

Best Practice > Passo 4 - Impostazioni Avanzate >

Come creare un Sito multi-lingua

 Return to chapter overview
Mostra/Nascondi testo nascosto

Internet permette di scavalcare i confini nazionali e, se si prevede che il Sito verrà consultato anche da persone di nazionalità diversa, è bene consentire la scelta fra più Lingue.

Gestire un Sito in Lingue diverse aggiunge un certo grado di complessità al Progetto ma, grazie alle funzioni messe a disposizione da WebSite X5 e potendo contare su un buon servizio di traduzione, tale compito può essere risolto brillantemente.

Innanzi tutto, è importante specificare che WebSite X5 genera tutti i file HTML relativi alle Pagine di un Sito utilizzando la Codifica UTF-8 (Unicode Transformation Format, 8 bit) dei caratteri. Grazie all'impiego dell'UTF-8 è possibile realizzare Siti in qualsiasi Lingua, incluse quelle che utilizzano alfabeti diversi da quello Latino come, per esempio, il Greco, il Cirillico, il Copto, l'Armeno, l'Ebraico e l'Arabo, senza trascurare il Cinese, il Giapponese e il Coreano. In più, non solo è possibile creare un Sito in qualsiasi Lingua ma è anche possibile prevedere testi in Lingue diverse all'interno dello stesso Sito, senza avere problemi di visualizzazione dei caratteri: per esempio, potremmo pensare tranquillamente a un testo in Russo con traduzione a fronte in Italiano.

Procedendo nella creazione di un Sito, WebSite X5 consente, in primo luogo, di associare una Lingua al Progetto (nella Impostazioni Generali | Base opzione Lingua dei contenuti): questo passaggio è essenziale per una corretta gestione dei testi che vengono inseriti automaticamente dal Programma. Oltre ad alcune Lingue pre-installate, è possibile accedere alla finestra Gestione Contenuti in Lingua cliccando sul pulsante [image] per creare/importare altre Lingue o modificare le voci di quelle già presenti (vedere, Come gestire le Lingue per i testi inseriti in automatico).

Infine, WebSite X5 permette di creare un Sito multi-lingua in cui si da al Visitatore la facoltà di scegliere la Lingua di consultazione che preferisce fra quelle disponibili. In questo caso, non occorre fare altro che creare un Progetto per ciascuna Lingua e collegarli fra loro come se fossero sezioni diverse di un unico Sito. I metodi per collegare fra loro Progetti che differiscono solo per la Lingua di consultazione sono essenzialmente due: il primo sfrutta la Pagina di Benvenuto, il secondo la possibilità di inserire dei collegamenti direttamente dell'Intestazione del Modello.

Clicca per espandere/ridurre How To: Come creare un Sito multi-lingua tramite la Pagina di Benvenuto

Ipotizzando di voler creare un Sito consultabile in Italiano, Inglese e Portoghese, è possibile utilizzare la Pagina di Benvenuto per inserire i pulsanti che permettono al Visitatore di scegliere in quale lingua visualizzare i contenuti.

§Innanzi tutto, occorre creare il Sito in Italiano definendone struttura e contenuti e in Impostazioni Generali | Base impostare "IT - Italian" come Lingua dei contenuti.

§Al Passo 4 - Impostazioni Avanzate cliccare sul pulsante Pagina di Benvenuto e, nella finestra relativa, attivare l'opzione Visualizza Pagina di Benvenuto specificando quale immagine/animazione visualizzare come Sfondo della Pagina e settando tutte le impostazioni necessarie per dargli l'aspetto desiderato.

§Per creare i pulsanti per la scelta della lingua, attivare l'opzione Visualizza collegamento ad altre Lingue.

§Attraverso i comandi disponibili, comporre l'Elenco Lingue. Dall'elenco proposto selezionare le voci "Deutsch", "Español" e "Français", relative a Lingue non previste, e cliccare sul pulsante Rimuovi. Cliccare poi sul pulsante Aggiungi... per richiamare la finestra Impostazioni Lingua e aggiungere la Lingua Portoghese: come Nome della Lingua da visualizzare digitare "Português" e importare un file per l'immagine associata.

§Analogamente, selezionare le voci "Italiano" e "English" e cliccare sul pulsante Modifica... per richiamare la finestra Impostazioni Lingua e aggiungere le immagini mancanti delle bandiere.

§Dal momento che il Progetto corrente è quello in Italiano (l'unico a cui sarà associata la Pagina di Benvenuto), selezionare la voce "Italiano"dall'Elenco Lingue e cliccare sul pulsante Predefinito.

§Utilizzare i pulsanti Sposta Sopra e Sposta Sotto per ordinare le Lingue nel modo più opportuno.

Inserite le immagini delle bandierine delle lingue, occorre impostare i collegamenti su di essi. Ipotizzando che verrà creato un Sito per ogni Lingua e che questo verrà pubblicato online, è possibile prevedere un collegamento con una URL:

§Nell'Elenco Lingue selezionare la voce "English" e cliccare sul pulsante Modifica... per richiamare la finestra Impostazioni Lingua.

§Cliccare sul pulsante [image] disponibile per l'opzione Collegamento per questa Lingua (es: mostra il Sito in questa lingua) e, nella finestra Collegamento richiamata, selezionare l'azione File o URL e specificare la URL del Sito in Inglese: per esempio, http://www.miosito.it/en/index.html, se si prevede di pubblicare il Sito in Inglese nella sotto-cartella "en" della cartella principale su Server.

§Ripetere le stesse operazioni anche per il Sito in Portoghese collegandolo alla URL relativa: per esempio, http://www.miosito.it/pt/index.html , se si prevede di pubblicare il Sito in Portoghese nella sotto-cartella "pt" della cartella principale su Server.

A questo punto il Sito è predisposto per permettere la scelta della Lingua ma mancano ancora i contenuti relativi alla Lingua Inglese e alla Lingua Portoghese.

§Per procedere più rapidamente alla creazione del Sito in Lingua Inglese, creare una copia del Sito in Italiano: nella finestra iniziale Scelta del Progetto selezionare il Progetto del Sito in Italiano e cliccare sul pulsante Duplica. Cliccare poi sul pulsante Rinomina per modificare adeguatamente il nome del nuovo Progetto.

§Aprire la copia del Progetto e in Impostazioni Generali | Base impostare "EN - English" come Lingua dei contenuti: procedere inserendo le localizzazioni per tutti i testi e gli elementi eventualmente dipendenti dalla Lingua.

§Al Passo 4 - Impostazioni Avanzate, accedere alla finestra Pagina di Benvenuto e disattivare l'opzione Visualizza Pagina di Benvenuto.

§Terminato il Progetto del Sito in Inglese, ripetere la stessa procedura per predisporre anche il Progetto del Sito in Portoghese.

Per la pubblicazione su Server dei Siti realizzati occorre procedere nel seguente modo:

§Pubblicazione del Sito in Italiano: il Sito in Italiano è quello a cui è associata la Pagina di Benvenuto ed è stato impostato come "predefinito". Procedendo alla pubblicazione verrà creato un file index.html, corrispondente alla Pagina di Benvenuto, e salvato nella cartella di pubblicazione. Per rispettare le URL impostate per i Siti in lingua Inglese e Portoghese, occorre creare su Server le sottocartelle previste: "en" e "pt".

Portato a termine questo passaggio, il Sito Italiano sarà online e nella Pagina di Benvenuto saranno attivi i collegamenti sui pulsanti della Lingua che però non porteranno ancora a nulla.

§Pubblicazione del Sito in Inglese: perché il link presente nella Pagina di Benvenuto al Sito Inglese funzioni, pubblicare il Progetto nella sotto-cartella "en" creata.

§Pubblicazione del Sito in Portoghese: analogamente, perché il link presente nella Pagina di Benvenuto al Sito Portoghese funzioni, pubblicare il Progetto nella sotto-cartella "pt" creata.

Pubblicati tutti e tre i Siti nelle corrette sotto-cartelle, i pulsanti presenti nella Pagina di Benvenuto funzioneranno correttamente e permetteranno ai Visitatori di consultare i contenuti del Sito nella Lingua preferita.

Attraverso l'opzione Collegamento per questa Lingua (es: mostra il Sito in questa lingua) presente nella finestra Impostazioni Lingua è possibile impostare sulle immagini associate alle Lingue (nella maggior parte dei casi, le bandierine) qualsiasi tipo di azione. Questo significa che, al posto che collegare un intero Sito come si è visto nell'esempio, si può collegare una semplice Pagina interna o un messaggio di avviso per spiegare che il Sito in una Lingua non è ancora disponibile ma lo sarà al più presto, oppure un documento PDF con tutte le informazioni che si vogliono fornire per una Lingua, o mettere in atto altre soluzioni ancora a seconda dei casi.
Clicca per espandere/ridurre How To: Come creare un sito multi-lingua tramite Pulsanti nell'Intestazione del Modello

Ipotizzando sempre di voler creare un Sito consultabile in Italiano, Inglese e Portoghese, un modo alternativo o complementare alla Pagina di Benvenuto per presentare i Pulsanti per la scelta della Lingua è quello di inserirli nell'Intestazione del Modello del Sito. Questo metodo offre il vantaggio di dare al Visitatore la possibilità di cambiare Lingua di consultazione in qualsiasi momento e da qualsiasi Pagina del Sito.

§Innanzi tutto, occorre creare il Sito in Italiano definendone struttura e contenuti e in Impostazioni Generali | Base impostare "IT - Italian" come Lingua dei contenuti.

§Accedere alla finestra Modifica del Modello per poter agire sull'Intestazione e creare i Pulsanti che permetteranno al Visitatore di scegliere la Lingua di consultazione.

§Attraverso il pulsante [image] Inserisci Immagine, importare il file grafico relativo all'immagine di una bandierina italiana: se si vuole creare un pulsante con effetto di mouseover, sfruttare l'opzione File Immagine su passaggio del mouse per importare una seconda immagine, leggermente diversa dalla prima.

§Ripetere questa procedura per creare anche i Pulsanti con la bandiera Inglese e la bandiera Portoghese.

§Selezionare il Pulsante con la bandiera Inglese e cliccare sul comando [image] Associa un Collegamento: nella finestra Collegamento richiamata scegliere l'azione File o URL e attivare l'opzione File su Internet digitando l'indirizzo a cui sarà raggiungibile la Home Page del Sito Inglese una volta che sarà online (per esempio: http://www.miosito.it/en/index.html).

§Ripetere la stessa procedura anche con il Pulsante per la Lingua Portoghese collegandolo alla URL relativa (per esempio: http://www.miosito.it/pt/index.html).

Ovviamente, dal momento che si sta lavorando al Progetto del Sito Italiano non occorre inserire alcun collegamento sul Pulsante con la bandiera Italiana.

§Per procedere più rapidamente alla creazione del Sito in Lingua Inglese, creare una copia del Sito in Italiano: nella finestra iniziale Scelta del Progetto selezionare il Progetto del Sito in Italiano e cliccare sul pulsante Duplica. Cliccare poi sul pulsante Rinomina per modificare adeguatamente il nome del nuovo Progetto.

§Aprire la copia del Progetto e in Impostazioni Generali | Base impostare "EN - English" come Lingua dei contenuti: procedere inserendo le localizzazioni per tutti i testi e gli elementi eventualmente dipendenti dalla Lingua.

§Accedere alla finestra Modifica del Modello e sistemare i collegamenti sui Pulsanti con le bandiere: associare a quello dell'Italiano il collegamento con la URL relativa (per esempio: http://http://www.miosito.it/index.html) e rimuovere il collegamento dal Pulsante con la bandiera Inglese.

§Terminato il Progetto del Sito in Inglese, ripetere la stessa procedura per predisporre anche il Progetto del Sito in Portoghese. In questo caso occorrerà impostare i collegamenti sui Pulsanti relativi alle Lingue Italiano e Inglese e rimuoverlo da quello relativo alla Lingua Portoghese.

Perché i Pulsanti creati per la scelta della Lingua funzionino correttamente è necessario che i Siti nelle 3 Lingue vengano pubblicati su Server rispettando i percorsi previsti.

§Creare nella cartella di pubblicazione su Server due sotto-cartelle e chiamarle: "en" e "pt".

§Pubblicare il Progetto in Italiano (assunto come Progetto principale) nella cartella principale su Server e i Progetti dei Siti in Inglese e in Portoghese rispettivamente nelle sotto-cartelle "en" e "pt".

Best practice:

-

Come gestire le Lingue per i testi inseriti in automatico


advert_ht

Come inserire dei messaggi pubblicitari all'interno del proprio Sito

Best Practice > Passo 4 - Impostazioni Avanzate >

Come inserire dei messaggi pubblicitari all'interno del proprio Sito

 Return to chapter overview
Mostra/Nascondi testo nascosto

E' esperienza comune visitare Siti Web che, oltre ai contenuti organici, presentano anche messaggi pubblicitari, molto spesso sotto-forma di banner grafici, altre volte come contenuti testuali o video-trailer aperti in popup o in altri formati ancora più fantasiosi.

L'inserimento di messaggi pubblicitari, soprattutto in Siti capaci di convogliare volumi consistenti di traffico, è una fonte di reddito dal momento che, non solo permette di far conoscere i propri prodotti ma, soprattutto, consente di poter essere pagati per lo spazio e la visibilità concessa ai messaggi di altri.

In WebSite X5 esistono modi diversi per gestire un messaggio pubblicitario legato a un proprio Prodotto: si può, per esempio, usare l'Oggetto Immagine per inserire dei banner all'interno delle Pagine, oppure ricorrere alle opzioni presenti al Passo 4 - Messaggio Pubblicitario. Se, invece, si aderisce a un programma (per es, Google AdSense) che prevede la pubblicazione di annunci pubblicitari in cambio di una retribuzione calcolata in base a criteri concordati (numero di visualizzazioni, numero di click, ecc.), in genere occorre inserire all'interno delle Pagine del proprio Sito del Codice HTML che viene fornito. In questi casi, in WebSite X5 occorre utilizzare l'Oggetto HTML e Widgets.

Clicca per espandere/ridurre How To: Come inserire un Banner all'interno di un Pagina

Un banner può essere gestito come una semplice immagine e, in quanto tale, inserita all'interno di una Pagina del Sito:

§Al Passo 2 - Creazione della Mappa selezionare la Pagina sulla quale si intende lavorare e al Passo 3 - Creazione della Pagina inserire un Oggetto Immagine nella Cella più opportuna della Griglia di impaginazione.

§Fare doppio click sull'Oggetto Immagine inserito e importare il file grafico relativo al banner.

§Cliccare sul pulsante [image] per richiamare la finestra Collegamento e associare un link al banner: per esempio, è possibile collegare una Pagina specifica interna o esterna al Sito.

Clicca per espandere/ridurre How To: Come inserire un Banner animato all'interno di una Pagina

Un banner può essere una semplice immagine statica ma può anche essere creata come una sequenza di immagini. Una soluzione molto semplice è di salvare il banner come .GIF animata e seguire la procedura già illustrata per inserirla nelle Pagine attraverso l'Oggetto Immagine. Una soluzione alternativa, invece, prevede di salvare le singole immagini di cui deve comporsi il banner e di utilizzarle per comporre un Oggetto Galleria:

§Al Passo 2 - Creazione della Mappa selezionare la Pagina sulla quale si intende lavorare e al Passo 3 - Creazione della Pagina inserire un Oggetto Galleria nella Cella più opportuna della Griglia di impaginazione.

§Fare doppio click sull'Oggetto Galleria inserito, selezionare lo SlideShow Classico avendo cura di disattivare l'opzione Mostra Barra Controlli e importare la lista dei file grafici preparati per comporre il banner.

§Selezionare le immagini inserite per definire gli effetti di transizione e i collegamenti.

Clicca per espandere/ridurre How To: Come inserire un Banner animato all'interno dell'intestazione del Sito

L'intestazione del Modello può essere un buon posto dove inserire un banner animato che dia un'anteprima dei diversi Prodotti presentati nel Sito: WebSite X5 permette di farlo sfruttando l'Oggetto SlideShow:

§Al Passo 1 - Modifica del Modello, nella sezione Intestazione, cliccare sul pulsante [image] per inserire un Oggetto SlideShow e importare le immagini preparate per comporre il banner.

§Composta la lista delle immagini, selezionarne una per volta e utilizzare il pulsante Effetto... per richiamare la finestra Proprietà Effetto:

·attraverso le opzioni delle sezioni Tipo di Effetto e Zoom e Posizione impostare un effetto di transizione e/o di posizione e movimento;

·attraverso la mappa della sezione Pagina specificare esattamente le Pagine in cui ciascuna immagine del banner deve essere visualizzata.

§Selezionare una immagine per volta e cliccare sul pulsante [image] per richiamare la finestra Collegamento e associare un link, per esempio, a una Pagina interna.

Clicca per espandere/ridurre How To: Come inserire un Banner come sfondo della finestra del Browser

Alcuni portali utilizzano formati pubblicitari alternativi, uno di questi prevede l'impiego di un'immagine di grosse dimensioni inserita direttamente come sfondo della finestra del Browser. Anche WebSite X5 consente di lavorare su questo elemento: le procedure cambiamo a seconda che si intenda impostarlo per tutto il Sito, piuttosto che per una o più Pagine specifiche.

Per impostare un'unica immagine di sfondo per tutto il Sito, occorre:

§Al Passo 1 accedere alla finestra Modello Personalizzato. Ricordiamo che è possibile farlo anche se si sta utilizzando un Modello Predefinito: in questi casi, è necessario creare prima una copia del Modello su cui lavorare, in modo da poter mantenere inalterato l'originale.

§Nell'elenco Sezione della Pagina selezionare lo Sfondo della Pagina e importare il File Immagine relativo al banner da utilizzare.

§Utilizzare le opzioni disponibili per definire allineamento e margini.

Per impostare un'immagine di sfondo per una Pagina specifica de Sito, invece, è necessario:

§Al Passo 2 - Creazione della Mappa selezionare la Pagina sulla quale di intende lavorare e cliccare sul pulsante Proprietà... in modo da richiamare la finestra Proprietà Pagina.

§Accedere alla sezione Grafica e in Sfondo del Sito solo per questa Pagina importare il file grafico relativo al banner da utilizzare.
Clicca per espandere/ridurre How To: Come visualizzare un messaggio pubblicitario attraverso una finestra in popup

Se si desidera fare in modo che all'apertura della Home Page venga visualizzato un messaggio pubblicitario attraverso una finestra in popup (ovvero, in sovrimpressione rispetto alla Pagina), occorre:

§Al Passo 4 aprire la sezione Messaggio Pubblicitario e attivare l'opzione Visualizza Messaggio Pubblicitario.

§Selezionare il Tipo di messaggio scegliendo tra Messaggio sull'angolo superiore destro, Messaggio in riquadro e Messaggio su barra orizzontale.

§Importare il file grafico relativo al banner da utilizzare e definire le impostazioni proposte.

§Associare un link al banner scegliendo la Collegamento.

§Definire se il banner deve essere visualizzato solo sulla Home Page o in tutte le Pagine del Sito.
Clicca per espandere/ridurre How To: Come inserire il codice fornito da Google AdSense per la pubblicazione di messaggi pubblicitari

Fatta l'iscrizione al programma Google AdSense, o ad altri programmi analoghi, e ottenuto il codice HTML da inserire nelle proprie Pagine, occorre:

§Al Passo 2 - Creazione della Mappa selezionare la Pagina sulla quale si intende lavorare e al Passo 3 - Creazione della Pagina inserire un Oggetto HTML e Widgets nella Cella più opportuna della Griglia di impaginazione.

§Fare doppio click sull'Oggetto HTML e Widgets inserito e copiare il codice HTML ottenuto.

Il codice HTML per la visualizzazione di messaggi pubblicitari può essere inserito anche nell'Intestazione/Piè di Pagina del Modello del Sito grazie al comando [image] Inserisci Codice HTML (vedere, Modifica del Modello).


Come gestire gli accessi alle Pagine Protette del Sito

Come gestire gli accessi e creare un'Area riservata

Best Practice > Passo 4 - Impostazioni Avanzate >

Come gestire gli accessi e creare un'Area riservata

 Return to chapter overview
Mostra/Nascondi testo nascosto

È esperienza comune imbattersi in Siti Web in cui non è possibile accedere liberamente a tutte le Sezioni o le Pagine di cui si compongono: in questi casi, prima di poter visualizzare determinati contenuti, è necessario registrarsi per ottenere le credenziali di accesso (ovvero una Login e una Password) indispensabili per poter procedere.

Esempi classici sono i Siti aziendali che prevedono Aree Riservate con materiali e listini solo per Rivenditori e Partners, oppure i Portali che richiedono l'iscrizione per accedere a contenuti magari in download.

WebSite X5 consente di prevedere all'interno di un Sito un'Area Riservata composta da una serie di Pagine Protette e di gestirne l'accesso attraverso la creazione di Gruppi Amministratori e Utenti.

Per spiegare come procedere, si ipotizzi di lavorare al Sito Web di un'Associazione di volontariato che gestisce diversi Progetti attraverso un Coordinamento Centrale e dei Comitati specifici. Oltre alla parte istituzionale aperta al pubblico, il Sito contiene delle Pagine, specifiche per ciascun Progetto, che devono poter essere consultate solo dai membri del Comitato che lo promuove oltre che dai referenti del Coordinamento Centrale. In totale i volontari dell'Associazione coinvolti sono 9 così organizzati:

Coordinamento Centrale | Comitato Progetto A | Comitato Progetto B | Comitato Progetto C
Membro 1 | Membro 1 | Membro 1 | Membro 1
Membro 2 | Membro 4 | Membro 6 | Membro 8
Membro 3 | Membro 5 | Membro 7 | Membro 9

Come si vede il Membro 1 non solo fa parte dei Coordinamento Centrale ma anche di tutti i Comitati responsabili dei Progetti in corso.

Solo dopo aver creato la Mappa del Sito e inserito i contenuti delle diverse Pagine, si può procedere alla definizione dell'Area Riservata del Sito e alla gestione dei profili degli Utenti che potranno avere accesso alle Pagine Protette.

Clicca per espandere/ridurre How To: Come definire gli Utenti e i Gruppi con accesso alle Pagine Protette

In base all'organigramma come da esempio, occorre creare nove Utenti con le relative credenziali di accesso e gestirli in Gruppi.

§Al Passo 4 - Impostazioni Avanzate, cliccare su Gestione Accessi.

§Nella Tabella Elenco Utenti e Gruppi con accesso alle Pagine Protette, sono già inseriti di default il Gruppo Amministratori con l'Utente Admin e il Gruppo Utenti con l'Utente Utente 1. Tralasciando momentaneamente il Gruppo Amministratori, selezionare il Gruppo Utenti e utilizzare il comando Nuovo Gruppo per creare i Gruppi che dovranno essere nominati "Coordinamento Centrale", "Comitato Progetto A", "Comitato Progetto B" e "Comitato Progetto C".

§Selezionare il Gruppo "Coordinamento Centrale" e cliccare sul pulsante Nuovo Utente per richiamare l'omonima finestra Nuovo Utente e creare l'Utente "Membro 1". Digitare "Membro 1" per l'opzione Nome e Cognome, associare una Username e una Password e scegliere la Pagina di ingresso più appropriata.

§Ripetere la stessa procedura per creare gli Utenti per tutti gli altri Membri, posizionandoli direttamente nei Gruppi corretti.

§L'Utente "Membro 1" fa parte di tutti i Gruppi: in questo caso, conviene selezionarlo e cliccare tre volte sul comando Crea Alias per creare altrettanti Alias dell'Utente. Selezionare ciascun Alias e trascinarlo in modo da posizionarne uno in ciascun Gruppo.

Clicca per espandere/ridurre
Clicca per espandere/ridurre How To: Come creare la Pagina di Accesso all'Area Riservata

La Pagina di Accesso è la Pagina a cui il Visitatore viene re-indirizzato quando cerca di accedere a una Pagina Protetta senza aver prima eseguito il login. Questa Pagina di Accesso viene creata in automatico dal Programma e presenta: un messaggio di benvenuto; i campi in cui il Visitatore, se li ha, può inserire la propria Login e Password; eventualmente, il pulsante Registrati che porta a una Pagina attraverso la quale il Visitatore può chiedere che gli vengano fornite le credenziali di accesso necessarie.

È possibile comporre il Testo di benvenuto che verrà visualizzato nella Pagina di Accesso attraverso l'omonima opzione presente nella finestra Gestione Accessi. L'obiettivo di questo testo è di accogliere il Visitatore e di spiegargli che sta tentando di accedere a dei contenuti riservati: occorre, quindi, invitarlo a inserire la propria Username e Password, se già ne possiede una, o a registrarsi per ottenere tali credenziali.

Per permettere al Visitatore di registrarsi è possibile procedere in due diversi modi:

1.Inserire nel Testo di benvenuto un indirizzo e-mail a cui scrivere per richiedere Username e Password. L'indirizzo immesso viene automaticamente riconosciuto da WebSite X5 che attiva il collegamento al programma di posta elettronica predefinito.

2.Creare una Pagina apposita con un modulo (vedere, Oggetto Modulo Invio E-mail) che il Visitatore deve compilare con i suo i dati per registrarsi e ricevere in risposta Username e Password. In questo caso, dopo aver preparato la Pagina, è necessario tornare alla finestra Gestione Accessi e cliccare sul pulsante [image] relativo all'opzione Pagina per la richiesta di registrazione per selezionarla. In seguito a questa operazione, il Programma crea automaticamente il pulsante Registrati e lo inserisce nella Pagina di Accesso, a fianco del pulsante Login.
Clicca per espandere/ridurre How To: Come impostare le Pagine Protette

Dopo aver definito la lista degli Utenti con le relative credenziali d'accesso, è possibile specificare quali Pagine del Sito devono essere protette e da chi ciascuna Pagina può essere consultata.

§Al Passo 2 - Creazione della Mappa selezionare la prima delle Pagine da proteggere e cliccare sul pulsante [image] per richiamare la finestra Pagina Protetta.

§Attivare l'opzione Imposta questa Pagina come Protetta e, quindi, mettere un segno di spunta a fianco dei singoli Utenti o dei Gruppi a cui si vuole permettere la visualizzazione. Sulla Mappa le Pagine Protette vengono distinte attraverso l'icona [image]. Le Pagine Protette possono essere visualizzate o meno nei Menu attraverso l'opzione Pagina non visibile sul Menu.

§Ripetere la procedura per tutte le Pagine da proteggere, valutando di volta in volta gli Utenti/Gruppi da abilitare.

Clicca per espandere/ridurre
Clicca per espandere/ridurre How To: Come definire i parametri d'accesso per l'Amministratore

Naturalmente, WebSite X5 consente di gestire non solo i profili degli Utenti ma anche quelli degli Amministratori: di default è già presente un Gruppo Amministratori in cui è inserito un Amministratore Admin.

§Per modificare il nome e le credenziali d'accesso dell'Amministratore Admin, selezionarlo all'interno dell'Elenco Utenti e Gruppi con accesso alle Pagine Protette e cliccare sul pulsante Modifica... in modo da richiamare la finestra Impostazioni Utente.

§Per creare nuovi profili Amministratore, selezionare il Gruppo Amministratori e cliccare sul pulsante Nuovo Utente per richiamare la finestra Impostazioni Utente e inserire le informazioni necessarie.

Gli Amministratori, a differenza dei semplici Utenti, possono accedere a tutte le Pagine Protette presenti nel Sito e, in più, con le stesse credenziali possono accedere al Pannello di Controllo online per gestire la visualizzazione dei commenti ai Post del Blog, i messaggi del Guestbook e per visualizzarre informazioni di diagnostica o sull'ottimizzazione del Sito per i Motori di Ricerca.

Pubblicato il Sito, ogni volta che un Visitatore tenterà di visualizzare una Pagina Protetta, gli verrà richiesto di inserire Username e Password. Se questi parametri verranno correttamente inseriti, la Pagina Protetta verrà visualizzata: di default, la durata della sessione (ovvero, l'intervallo di tempo che intercorre prima che venga nuovamente richiesto di inserire Username e Password) è di 5 minuti e viene resettato a ogni link a una Pagina Protetta.

Quando si testa in locale il funzionamento del Sito creato, una finestra d'avviso avverte che le Pagine Protette vengono visualizzate senza la richiesta di accesso. L'Area Riservata viene attivata solo con la pubblicazione del Sito su Server.


Come gestire i commenti dal Pannello di Controllo online

Come gestire i commenti di Blog e Guestbook dal Pannello di Controllo online

Best Practice > Passo 4 - Impostazioni Avanzate >

Come gestire i commenti di Blog e Guestbook dal Pannello di Controllo online

 Return to chapter overview
Mostra/Nascondi testo nascosto

Un Blog è una sorta di diario in rete attraverso il quale è possibile pubblicare articoli di varia natura e dare la possibilità ai lettori di lasciare dei commenti. Se la comunità dei lettori è attiva e adeguatamente stimolata dalla qualità dei post, è così possibile che si sviluppino delle interessanti discussioni a tema.

Clicca per espandere/ridurre How To: Come configurare la gestione dei commenti in WebSite X5

Per dare la possibilità ai Lettori di lasciare dei commenti ai post pubblicati è necessario innanzi tutto configurare il Blog agendo sulle opzioni presenti in Blog | Commenti. In particolare, occorre:

§Attivare l'opzione Consenti l'inserimento dei Commenti per gli Articoli del Blog.

§Specificare il percorso della Cartella su Server con accesso in scrittura, ovvero della cartella all'interno della quale è abilitata la scrittura dei file da parte del codice PHP.

§Decidere se attivare il controllo anti-spam "Captcha" per l'inserimento del Commenti.

§Specificare l'E-mail per l'invio della notifica della ricezione dei Commenti, ovvero l'indirizzo e-mail sul quale si vogliono ricevere le e-mail che vengono inviate in automatico per avvisare che un Lettore ha lasciato un nuovo commento.

§Specificare se i commenti possono essere pubblicati on-line subito o se devono prima essere approvati.

Fatto questo è possibile procedere all'inserimento dei post e alla pubblicazione del Blog. In calce ai post del Blog verrà automaticamente inserita una form attraverso la quale i lettori potranno comporre e inviare i loro commenti. Attraverso tale form vengono richiesti: Nome, E-mail, Sito Internet e Messaggio. Fatta eccezione per quello relativo al Sito Internet, tutti i campi sono obbligatori.
Clicca per espandere/ridurre How To: Come gestire i commenti attraverso il Pannello di Controllo online

Configurata la gestione dei commenti del Blog come al punto precedente, quando un Lettore lascerà un commento, verrà automaticamente creata una e-mail di notifica che sarà inviata all'indirizzo e-mail specificato. Se è stata attivata l'opzione Visualizza Commenti dopo approvazione da Pannello di Controllo, perché il commento venga visualizzato online in calce al post a cui fa riferimento è necessario che venga prima approvato mediante l'apposito comando del Pannello di Controllo che viene automaticamente creato da WebSite X5.

Il Pannello di Controllo è disponibile all'URL http://www.miosito.it/admin, dove http://www.miosito.it è l'URL del Sito a cui il Blog è collegato, ed è a disposizione di tutti gli Utenti inseriti nel Gruppo Amministratori nella sezione Gestione Accessi disponibile al Passo 4 - Impostazioni Avanzate.

Nella sezione Blog del Pannello di Controllo sono disponibili due menu a discesa che propongono l'elenco delle categorie e le liste di articoli ad esse collegate. Tramite questi menu, è possibile identificare il post di cui si vogliono visualizzare i commenti ricevuti. Di seguito, viene presentata la lista dei commenti: per ogni commento è riportato l'autore, il suo indirizzo e-mail, il testo del commento, la data e l'ora in cui è stato inviato. Se l'informazione è disponibile, sul nome dell'autore viene automaticamente impostato il link al suo Sito Internet.

Per procedere alla gestione dei commenti è dunque necessario:

§Accedere al Pannello di Controllo online e fare il login, quindi, aprire la sezione Blog.

§Identificare il post di cui si vogliono visualizzare i commenti attraverso i menu a discesa che propongono l'elenco delle categorie previste e dei relativi post inseriti.

§Scorrere la lista dei commenti ricevuti per il post selezionato e gestire la visualizzazione dei commenti sul Blog attraverso i comandi:

-Elimina: per rimuovere il commento lasciato che, oltre a non essere pubblicato sul Blog, viene cancellato anche dall'elenco dei commenti nel Pannello di controllo.

-Approva/Disapprova: per approvare un commento, e quindi permettere che venga visualizzato sul Blog, o disapprovarlo, e quindi rimuoverlo dall'elenco dei post visualizzati sul Blog. Un commento disapprovato non viene cancellato dalle liste presentate nel Pannello di controllo.

Avere la possibilità di gestire la visualizzazione dei commenti sul Blog è fondamentale per tutelarsi da azioni di spam e per moderare le discussioni eliminando messaggi ritenuti offensivi, non a tema o non in linea con lo stile che si vuole mantenere.


Creare un carrello di e-commerce

Come creare un carrello di e-commerce

Best Practice > Passo 4 - Impostazioni Avanzate > Carrello e-commerce >

Come creare un carrello di e-commerce

 Return to chapter overview
Mostra/Nascondi testo nascosto

Con WebSite X5 è possibile trasformare il proprio sito Web in un insostituibile strumento di lavoro, per esempio, attivando un Carrello di e-commerce attraverso il quale vendere direttamente online i Prodotti / Servizi presentati.

Si ipotizzi di dover creare un semplice Carrello di e-commerce attraverso il quale vendere dei capi di abbigliamento. Ai fini dell'esempio, ci limiteremo ad inserire un numero limitato di Prodotti organizzandoli in poche Categorie. Attiveremo sia la spedizione per Posta che tramite Corriere espresso e permetteremo il pagamento sia in contrassegno che tramite carta di credito. Ovviamente con WebSite X5 è possibile andare ben oltre e gestire un Catalogo di Prodotti decisamente più corposo e articolato, con numerosi metodi di spedizione e pagamento alternativi.

Tutte le opzioni necessarie per configurare un carrello di e-commerce sono disponibili nella sezione Carrello e-commerce del Passo 4 - Impostazioni Avanzate. Una volta impostato il carrello, è possibile poi predisporre un vero e proprio catalogo online sfruttando l'apposito Oggetto Elenco Prodotti.

Clicca per espandere/ridurre How to: Come comporre il Catalogo Prodotti

Il primo compito da svolgere nella creazione di un Carrello di e-commerce è comporre il Catalogo Prodotti, ovvero inserire tutti i Prodotti che potranno essere acquistati, avendo cura di prevedere tutte le informazioni necessarie per descriverli al meglio e, soprattutto se sono numerosi, di organizzarli in categorie e sotto-categorie omogenee.

§Innanzi tutto, nella Carrello e-commerce | Prodotti, cliccare sul pulsante Nuova Categoria per creare tutte le Categorie e le sotto-Categorie che occorrono. Le categorie vengono inserite direttamente nella tabella riassuntiva: sono dei semplici contenitori e non godono di proprietà particolari. Per maggior chiarezza è comunque consigliabile nominarle opportunamente.

§Selezionare la categoria o sotto-categoria più opportuna e cliccare sul pulsante Nuovo Prodotto e specificare le informazioni richiesta nella finestra Impostazioni Prodotto richiamata. Confermando, verrà aggiunto il nuovo Prodotto.

§Ripetere in modo da inserire tutti i Prodotti che si desidera mettere in vendita sul carrello.

Clicca per espandere/ridurre

Il Catalogo Prodotti può essere importato, se già esistente in formato .TXT o .CSV, o esportato attraverso i pulsanti [image] e [image]. Per maggiori informazioni sulle funzioni Importa/Esporta e su come creare e gestire i file con il catalogo dei Prodotti vedere: Come importare/esportare i Prodotti del Carrello.
Clicca per espandere/ridurre How To: Come definire i metodi di spedizione e pagamento

Impostato il Catalogo Prodotti, occorre definire quali sono i metodi di spedizione e pagamento fra cui i Clienti potranno scegliere durante la compilazione dell'ordine.

§Nella finestra Carrello e-commerce | Gestione Ordine, la tabella Elenco dei metodi di Spedizione propone di default le voci "Posta" e "Corriere espresso": selezionarne uno alla volta e cliccare sul pulsante Modifica... per richiamare la finestra Metodo di Spedizione e personalizzare i parametri impostati.

§Cliccare sul pulsante Aggiungi... per procedere alla definizione di un nuovo metodo di spedizione.

In maniera analoga, è possibile impostare anche i metodi di pagamento sfruttando la finestra Metodo di Pagamento. Fra i tipi di pagamento previsti, ci sono anche quelli che prevedono l'impiego di PayPal o di Carta di Credito. Per attivare PayPal, per esempio, è necessario:

§In Metodo di Pagamento | Generale, specificare un Nome e una Descrizione del metodo di pagamento;

§In Metodo di Pagamento | Costo, attivare l'opzione Pagamento immediato e impostare come Tipo di Pagamento "PayPal/Carta di Credito". Inserire il proprio Account PayPal nell'apposito campo e specificare quali Pagine del Sito dovranno essere visualizzate in caso di Avvenuto Pagamento o di Errore Pagamento.

§In Metodo di Pagamento | Tipo, inserire una descrizione del metodo di pagamento idonea per essere inserita nella e-mail di Conferma d'Ordine che il Cliente riceverà dopo aver inviato l'ordine.
Clicca per espandere/ridurre How To: Come impostare le spese di spedizione in base al peso complessivo dei Prodotti ordinati o all'ammontare dell'ordine

Nell'attivare un nuovo metodo di spedizione è possibile prevedere un costo fisso o un costo variabile in base al peso complessivo dei Prodotti ordinati o all'ammontare dell'ordine.

Per creare delle fasce di prezzo in base al peso dei Prodotti ordinati occorre:

§Utilizzare l'opzione Peso, presente nella finestra Impostazioni Prodotto | Generale, per impostare il peso di tutti i Prodotti inseriti nel catalogo del carrello.

L'opzione Peso non impone un'unità di misura specifica. Identificata l'unità di misura più appropriata in base alla tipologia di Prodotti trattati, prestare attenzione a mantenerla sempre inalterata in modo da non compromettere il calcolo delle spese di spedizione.

§Nella finestra Carrello e-commerce | Gestione Ordine, cliccare sul pulsante Aggiungi... o sul pulsante Modifica... presenti a fianco della tabella Elenco dei metodi di Spedizione per richiamare la finestra Metodo di Spedizione e procedere alla creazione di un nuovo metodo di spedizione o alla modifica di un metodo già presente.

§In Metodo di Spedizione | Costo, attivare l'opzione Costo relativo al totale del Peso e cliccare sul pulsante Aggiungi.... Utilizzare la finestra richiamata per specificare il Peso Totale che deve essere uguagliato o superato perché possa essere applicato il Costo di spedizione specificato.

§Ripetere gli ultimi passaggi in modo da impostare tutte le fasce di prezzo desiderate.

In maniera analoga, dopo aver impostato i prezzi di tutti i Prodotti presenti nel carrello (attraverso l'opzione Prezzo presente in Impostazioni Prodotto | Generale) è possibile creare delle fasce di prezzo in base all'ammontare dell'ordine:

§Nella finestra Carrello e-commerce | Gestione Ordine, cliccare sul pulsante Aggiungi... o sul pulsante Modifica... presenti a fianco della tabella Elenco dei metodi di Spedizione per richiamare la finestra Metodo di Spedizione e procedere alla creazione di un nuovo metodo di spedizione o alla modifica di un metodo già presente.

§In Metodo di Spedizione | Costo, attivare l'opzione Costo relativo al totale dell'Ordine e cliccare sul pulsante Aggiungi.... Utilizzare la finestra richiamata per specificare il Totale Ordine che deve essere uguagliato o superato perché possa essere applicato il Costo di spedizione specificato.

§Ripetere gli ultimi passaggi in modo da impostare tutte le fasce di prezzo desiderate.
Clicca per espandere/ridurre How To: Come comporre il Modulo d'ordine

Ovviamente, per poter fare un Ordine d'acquisto, i Clienti devono compilare un Modulo con i dati necessari per la fatturazione e l'eventuale spedizione delle merci. Per comporre il modulo d'ordine è necessario:

§Nella finestra Carrello e-commerce | Dati Cliente, verificare nella tabella riassuntiva Elenco Campi la composizione del modulo d'ordine. Selezionare il campo su cui si vuole agire e cliccare sui pulsanti [image] e [image] per renderlo o meno "visibile" (ovvero, presente nel modulo) e "obbligatorio" (ovvero, il Cliente dovrà obbligatoriamente compilare il campo per poter procedere).

§Stabilita la composizione del Modulo, attivare l'opzione Mostra modulo Dati di Spedizione per duplicare i campi necessari per permettere ai Clienti di specificare dei dati di spedizione diversi da quelli di fatturazione.

§Attraverso l'apposito editor, comporre il Testo delle Condizioni di Vendita che i Clienti dovranno accettare per portare a termine l'ordine.
Clicca per espandere/ridurre How To: Come impostare l'invio dei dati tramite e-mail

In caso di ordine da parte di un Cliente, dal carrello e-commerce devono partire 2 e-mail: la prima è l'e-mail di Riepilogo Ordine ed è destinata all'Amministratore del Sito; la seconda è l'e-mail di Conferma d'Ordine ed è destinata al Cliente.

§Nella finestra Carrello e-commerce | Invio Ordine, selezionare Invia i dati per e-mail e specificare l'Indirizzo e-mail dove ricevere gli Ordini (ovvero l'e-mail dell'Amministratore del Sito).

§Se si desidera includere in coda alla e-mail i dati dell'ordine in formato .CSV, attivare l'opzione Allega Dati Ordine in formato CSV.

§Comporre il Testo di introduzione e il Testo di chiusura che verranno ripresi per comporre la E-mail di conferma Ordine per il Cliente.

Per maggiori informazioni su come viene composta l'e-mail di Conferma d'Ordine, vedere Come definire i contenuti della e-mail di conferma Ordine.
Clicca per espandere/ridurre How To: Come creare un pulsante "Acquista"

Impostato il motore del carrello di e-commerce, è necessario creare delle Pagine del Sito che presentino i Prodotti a catalogo e ne permettano l'acquisto. Creare il classico pulsante "Acquista" è molto semplice:

§Al Passo 2 - Creazione della Mappa selezionare la Pagina su cui si intende lavorare e inserire un Oggetto Immagine nella Cella più opportuna della Griglia di impaginazione.

§Fare doppio click sull'Oggetto Immagine per poter procedere alla sua definizione: importare il file grafico predisposto per definire la grafica del pulsante.

§Se lo si desidera, accedere alla sezione Oggetto Immagine | Visualizzazione e scegliere quale Effetto su passaggio del mouse attivare.

§In Oggetto Immagine | Generale cliccare sul pulsante [image] per associare all'Immagine un Collegamento.

§Nella finestra richiamata Collegamento selezionare l'azione Aggiungi al Carrello. Questo tipo di collegamento può essere impostato in due diversi modi:

-se si vuole richiamare la tabella dei Prodotti, è sufficiente attivare l'opzione Visualizza l'elenco dei Prodotti della Categoria selezionata e selezionare la categoria opportuna nell'albero che ripropone la struttura del catalogo dell'e-commerce;

-se si vuole aggiungere direttamente un Prodotto nel carrello, invece, occorre attivare l'opzione Aggiungi direttamente nel Carrello il Prodotto selezionato e selezionare il Prodotto in questione specificandone subito la Variante, se disponibile, e la Quantità.

In alternativa, i Prodotti possono essere presentati attraverso l'Oggetto Elenco Prodotti.

Per maggiori informazioni su come utilizzare l'Oggetto Elenco Prodotti vedere: Come lavorare con l'Oggetto Elenco Prodotti.

Quando si testa il funzionamento del Sito creato in locale, una finestra d'avviso avverte che l'ordine non verrà inviato e viene effettuato il redirect automatico alla Pagina di conferma dell'ordine. Il Carrello di e-commerce funziona pienamente solo con la pubblicazione del Sito su Server.

Best practice:

- | Come importare/esportare i Prodotti del Carrello
- | Come definire i contenuti della e-mail di conferma Ordine
- | Come lavorare con l'Oggetto Elenco Prodotti


Come definire i contenuti della e-mail di conferma Ordine

Best Practice > Passo 4 - Impostazioni Avanzate > Carrello e-commerce >

Come definire i contenuti della e-mail di conferma Ordine

 Return to chapter overview

Portato a termine l'Ordine, è importante che il Cliente riceva come feedback una e-mail di conferma grazie alla quale può accertarsi di aver fatto tutto correttamente e ricevere le indicazioni necessarie per effettuare il pagamento.

WebSite X5 compone automaticamente l'e-mail di conferma Ordine, riprendendo solo le informazioni utili, in base alle scelte effettuate dal Cliente durante la compilazione dell'Ordine stesso.

Nello specifico, l'e-mail di conferma ordine viene così composta:

Testo di introduzione

Descrizione:

È il testo iniziale: dovrebbe contenere un ringraziamento per l'acquisto effettuato e anticipare i contenuti che seguiranno.

Esempio:

Gentile Cliente,

Ringraziandola per il Suo acquisto le inviamo il riepilogo del suo Ordine.

Qui di seguito può trovare l'elenco dei prodotti ordinati, i dati di fatturazione e le istruzioni per la spedizione ed il pagamento scelto.

Dove impostarlo:

In Carrello e-commerce | Invio Ordine, attraverso il campo Testo di introduzione.

Dati Utente

Descrizione:

È la parte in cui vengono riportati i dati di fatturazione inseriti dal Cliente attraverso in Modulo d'Ordine.

Dove impostarlo:

Il Modulo d'Ordine può essere composto in Carrello e-commerce | Dati Cliente.

Riepilogo Ordine

Descrizione:

È una tabella in cui vengono riepilogati tutti i Prodotti ordinati: viene riportata la quantità e il totale parziale per Prodotto oltre che il totale complessivo dell'Ordine.

Dove impostarlo:

Non deve essere impostato nulla in particolare: la tabella con il riepilogo viene creata in automatico in base all'Ordine.

Metodo di Pagamento

Descrizione:

È necessario che fornisca, in base al metodo scelto dal Cliente, le istruzioni e le informazioni utili per permettergli di eseguire il pagamento.

Esempio:

Per il Metodo di Pagamento "Bonifico Bancario":

Qui di seguito sono riportati i dati necessari per effettuare il pagamento tramite Bonifico Bancario:

XXX YYY ZZZ

Le ricordiamo che una volta effettuato il pagamento è necessario l'invio della copia contabile insieme al Numero di Ordine.

Dove impostarlo:

Nella sezione Messaggio E-mail della finestra Metodo di Pagamento.

Metodo di Spedizione

Descrizione:

È indicato che ricordi al Cliente il metodo di spedizione che ha scelto fornendogli, se possibile, delle informazioni sui tempi e i modi della consegna, oltre a qualsiasi altra informazione utile.

Esempio:

Per il Metodo di Spedizione "Corriere Espresso":

Spedizione tramite Corriere Espresso.

La merce verrà consegnata in 1-2 giorni lavorativi.

Dove impostarlo:

Nella sezione Messaggio E-mail della finestra Metodo di Spedizione.

Testo di chiusura

Descrizione:

È la formula di chiusura con cui si esplicita la propria disponibilità e si porgono i saluti, firmando.

Esempio:

Rimaniamo a Sua disposizione per ulteriori informazioni.

Cordiali Saluti, Staff Commerciale.

Dove impostarlo:

In Carrello e-commerce | Invio Ordine, attraverso il campo Testo di chiusura.

Come per tutte le e-mail composte e inviate automaticamente dal Programma, anche all'e-mail di conferma Ordine viene applicato lo stile grafico definito in Stili e Modelli | E-mail.

L'e-mail di conferma Ordine viene inviata anche in formato testo.

Best practice:

- | Come creare un Carrello di e-commerce
- | Come importare/esportare i Prodotti del Carrello


Come importare/esportare i Prodotti del Carrello

Best Practice > Passo 4 - Impostazioni Avanzate > Carrello e-commerce >

Come importare/esportare i Prodotti del Carrello

 Return to chapter overview

Dopo aver creato un Carrello e-commerce può essere utile avere la possibilità di esportare il catalogo dei Prodotti in modo, per esempio, da poterlo reinserire in un altro Progetto o di poterlo utilizzare in altri software, magari dedicati alla gestione della fatturazione. In senso opposto, ovviamente, è altrettanto importante avere la possibilità di importare il catalogo Prodotti in modo da non doverlo ricreare da zero.

In WebSite X5 è possibile portare a termine queste operazioni di Importazione/Esportazione attraverso gli appositi comandi disponibili nella Barra Strumenti della finestra Carrello e-commerce | Prodotti. L'esportazione del catalogo dei Prodotti produce un file in formato .TXT o .CSV che può essere facilmente aperto e modificato tramite un comune editor di testo (per esempio, il Blocco Note di Windows) o Microsoft Excel.

Per modificare manualmente il file ottenuto dall'esportazione del Catalogo Prodotti o crearne uno nuovo da importare, è fondamentale attenersi alle seguenti regole:

§La prima riga deve contenere l'intestazione dei campi e deve riportare le seguenti diciture:

ID;Category;Name/Code;Description;Price;Enable VAT;VAT Value;Weight;Options;Enable Discounts;Discounts

§Eliminare un campo dall'intestazione equivale ad eliminare il dato per tutti i Prodotti. Ovviamente, i campi obbligatori Category, Name/Code, Description e Price non possono essere eliminati dall'intestazione.

§Ogni riga, successiva all'intestazione, deve corrispondere a un Prodotto;

§Tutti i parametri devono essere riportati separati dal carattere ";".

§Per ciascun Prodotto deve essere riportato obbligatoriamente: il nome della Categoria, il nome del Prodotto, la descrizione del Prodotto, il prezzo del Prodotto. Tutti gli altri campi sono opzionali e possono essere omessi (semplicemente non scrivendo nulla fra i caratteri ";" per il campo in questione).

§L'ID del Prodotto deve essere generato dal Programma e non manualmente: se si inserisce un nuovo Prodotto è corretto lasciare vuoto il campo relativo all'ID.

§Gli spazi eventualmente inseriti, se superflui, verranno automaticamente rimossi in fase di importazione.

Nello specifico, i parametri presenti nel file .TXT o .CSV sono:

Parametro: ID

Obbligatorio

No

Descrizione

È un identificativo univoco per il Prodotto.

Valore

Viene generato ed associato al Prodotto in automatico dal Programma.

In caso si voglia aggiornare il file .TXT o .CSV ottenuto tramite una precedente esportazione è bene non modificare gli ID già assegnati e lasciare vuoto il campo per eventuali nuovi Prodotti aggiunti. Anche nel caso si crei un file .TXT o .CSV da zero per importare il catalogo nel Carrello non bisogna creare manualmente gli ID dei Prodotti. In fase di importazione, infatti, il Programma confronta gli ID per non avere duplicati e genera quelli mancanti.

Parametro: Category

Obbligatorio

Sì

Descrizione

È la Categoria in cui è inserito il Prodotto.

Valore

È possibile riprodurre il percorso di categorie e sotto-categorie utilizzando il carattere ">".

Per esempio, se il Prodotto è una maglietta che nel Catalogo è inserita nella sotto-categoria "Casual" della categoria "Abbigliamento Uomo", nel file .TXT o .CSV si può riportare il percorso nel seguente modo:

... ; Abbigliamento Uomo > Casual ; ...

Con questo tipo di notazione è possibile inserire tutte le sotto-categorie necessarie.

Parametro: Name/Code

Obbligatorio

Sì

Descrizione

È il Nome o il Codice assegnato al Prodotto.

Valore

In caso di esportazione del catalogo in .TXT o .CSV, questo parametro viene ripreso dal campo Nome/Codice della finestra Impostazioni Prodotto | Generale.

Parametro: Description

Obbligatorio

Sì

Descrizione

È la descrizione associata al Prodotto.

Valore

In caso di esportazione del catalogo in .TXT o .CSV, questo parametro viene ripreso dal campo Descrizione della finestra Impostazioni Prodotto | Generale.

Parametro: Price

Obbligatorio

Sì

Descrizione

È il prezzo associato al Prodotto.

Valore

In caso di esportazione del catalogo in .TXT o .CSV, questo parametro viene ripreso dal campo Prezzo della finestra Impostazioni Prodotto | Generale.

Parametro: Enable VAT

Obbligatorio

No

Descrizione

Indica se per il Prodotto è prevista l'applicazione di un'IVA particolare.

Valore

In caso di esportazione del catalogo in .TXT o .CSV, questo parametro viene ripreso dall'opzione IVA (%) della finestra Impostazioni Prodotto | Generale. Questa opzione è disponibile solo se in Carrello e-commerce | Disponibilità è stata scelta la Tipologia "IVA inclusa nel prezzo" per le Impostazioni IVA e serve per associare al Prodotto un'IVA particolare, diversa da quella degli altri Prodotti a Catalogo. In questi casi i prezzi vengono riportati IVA esclusi.

Questo parametro può assumere solo due valori: 0 o 1, rispettivamente per i casi in cui non è stata attivata o è stata attivata l'opzione IVA (%) sopra citata.

Parametro: VAT Value

Obbligatorio

No

Descrizione

È il valore dell'IVA nel caso in cui è prevista l'applicazione di un'imposta particolare al prezzo del Prodotto.

Valore

In caso di esportazione del catalogo in .TXT o .CSV, questo parametro viene ripreso dall'opzione IVA (%) della finestra Impostazioni Prodotto | Generale che, come detto per il parametro precedente, è disponibile solo se in Carrello e-commerce | Disponibilità è stata scelta la Tipologia "IVA inclusa nel prezzo" per le Impostazioni IVA.

Se l'opzione IVA (%) della finestra Impostazioni Prodotto | Generale viene attivata ma non viene specificato alcun valore, viene ripreso il Valore di default (%) impostato in Impostazioni Prodotto | Disponibilità.

Parametro: Weight

Obbligatorio

No

Descrizione

È il peso associato al Prodotto.

Valore

In caso di esportazione del catalogo in .TXT o .CSV, questo parametro viene ripreso dal campo Peso della finestra Impostazioni Prodotto | Generale.

Parametro: Options

Obbligatorio

No

Descrizione

È l'elenco delle varianti previste per il Prodotto.

Valore

In caso di esportazione del catalogo in .TXT o .CSV, questo parametro viene ripreso dal campo Elenco Varianti Principali della finestra Impostazioni Prodotto | Opzioni.

In caso di creazione di un file .TXT o .CSV da importare, invece, l'elenco delle varianti di Prodotto può essere introdotto utilizzando il carattere "|", nel seguente modo:

... ; Variante1 |Variante2 | Variante3 ; ....

Con questo tipo di notazione è possibile inserire tutte le varianti necessarie.

Parametro: Enable Discounts

Obbligatorio

No

Descrizione

Indica se per il Prodotto è previsto uno sconto quantità.

Valore

In caso di esportazione del catalogo in .TXT o .CSV, questo parametro viene ripreso dall'opzione Attiva sconto quantità della finestra Impostazioni Prodotto | Sconto.

Questo parametro può assumere solo due valori: 0 o 1, rispettivamente per i casi in cui non è stata attivata o è stata attivata l'opzione Attiva sconto quantità sopra citata.

Parametro: Discounts

Obbligatorio

No

Descrizione

È la lista degli sconti quantità da applicare al Prodotto, se previsti.

Valore

In caso di esportazione del catalogo in .TXT o .CSV, questo parametro viene ripreso, come il precedente, dall'opzione Attiva sconto quantità della finestra Impostazioni Prodotto | Sconto.

In caso di creazione di un file .TXT o .CSV da importare, invece l'elenco degli sconti quantità da applicare deve essere scritto rispettando la seguente notazione:

... ; quantità : sconto | quantità : sconto ; ...

In questo modo, se per ordini superiori ai 20 pezzi è previsto uno sconto del 10% e per ordini superiori ai 50 pezzi è previsto uno sconto del 15%, occorre inserire i dati scrivendo:

... ; 20 : 10 | 50 : 15 ; ...

Utilizzando il carattere "|" è possibile inserire tutti gli sconti quantità necessari.

Dopo aver importato un file .TXT o .CSV ottenuto da una precedente esportazione o creato manualmente è molto probabile che questo venga aggiornato dal Programma: per esempio, tramite l'inserimento degli ID Prodotti mancanti. Per questo motivo, se si desidera avere una copia aggiornata del file .TXT o .CSV è necessario procedere a una nuova esportazione del Catalogo Prodotti.

Best practice:

- | Come creare un Carrello di e-commerce
- | Come definire i contenuti della e-mail di conferma Ordine


HTML, HTML5 e CSS

HTML, HTML5 & CSS

Approfondimenti >

HTML, HTML5 & CSS

 Return to chapter overview
Mostra/Nascondi testo nascosto

Semplificando, un Sito Web non è altro che un insieme di Pagine messe tra loro in relazione, in base a una gerarchia, attraverso una struttura ipertestuale.

Esistono due tipologie di Pagine Web: statiche e dinamiche. Mentre le prime sono fondamentalmente ipertesti in formato HTML, le seconde fanno uso di linguaggi di scripting.

Ogni Pagina Web ha uno o più URL (Universal Resource Locator), un link permanente che consente di raggiungerla: in altre parole, la URL è l'indirizzo che viene digitato dall'Utente nel proprio Web Browser per poter visualizzare la Pagina.

Clicca per espandere/ridurre HTML

HTML (acronimo di Hyper Text Mark-Up Language) è un linguaggio di markup sviluppato alla fine degli anni '80 da Tim Berners-Lee al CERN di Ginevra e usato per descrivere i documenti ipertestuali disponibili nel Web.

HTML è un linguaggio di pubblico dominio la cui sintassi è stabilita dal World Wide Web Consortium (W3C): durante gli anni ha subito molte revisioni e attualmente l'ultima versione disponibile è la 4.01, resa pubblica nel 1999. Dopo un periodo di sospensione, in cui il W3C si è focalizzato soprattutto sulle definizioni di XHTML (applicazione a HTML di regole e sintassi in stile XML) e dei fogli di stile (Cascading Style Sheet, CSS), nel 2007 è ricominciata l'attività di specifica con la definizione di HTML5, attualmente ancora allo stato di bozza (draft) ma già ampiamente utilizzato.

Essendo un linguaggio di marcatura e non di programmazione, HTML non ha meccanismi per permette l'interazione: prevede, invece, l'uso di marcatori, detti "tag", che hanno la funzione di indicare come i diversi elementi che compongono una pagina devono essere visualizzati.

Le pagine HTML sono accomunate da un'identica struttura:

§Dichiarazione della DTD (Document Type Definition, ovvero Definizione del tipo di documento) adottata.

Con la DTD viene comunicato al browser l'URL delle specifiche html che si stanno utilizzando per il documento: lo scopo è quello di indicare quali elementi, attributi ed entità possono essere lecitamente utilizzati.

§Apertura del tag <html>

§Sezione HEAD

Questa sezione contiene informazioni, non direttamente visualizzate dai Browser, che riguardano come il documento deve essere interpretato. In questa sezione devono essere collocati i meta-tag (fra cui quelli per i Motori di ricerca), script JavaScript, Fogli di stile, ecc.

§Sezione BODY

Questa sezione racchiude il contenuto vero e proprio del documento.

§Chiusura del tag </hml>

L'HTML prevede tag specifici per far fronte a molte necessità di formattazione e per fornire molte funzionalità ma occorre ricordare che è stato concepito per definire il contenuto logico e non l'aspetto finale del documento. Pur essendo stato nel tempo piegato per far fronte a scopi presentazionali, l'HTML rimane un linguaggio che dovrebbe essere utilizzato solo per definire la struttura di un documento: per definire come i documento deve essere presentato occorre utilizzare, piuttosto, gli appositi Fogli di stile.
Clicca per espandere/ridurre HTML5

HTML5 si propone come evoluzione dell'HTML 4.01 e introduce molte novità finalizzate, principalmente, a separare in maniera sempre più netta la struttura delle pagine (definita dal markup) dall'aspetto grafico (definito dai CSS) e dai contenuti veri e propri. Fra gli obiettivi che si pone vi sono l'introduzione di nuovi comandi per funzioni fino ad ora ottenute in maniera non standard, garantire una buona compatibilità sui diversi Browser e consentire l'utilizzo di applicazioni basate sul Web anche in assenza di collegamento a Internet. Anche se già ampiamente utilizzato, HTML5 è ancora in fase di definizione (draft) e il W3C ha annunciato che sarà ufficialmente pronto nel luglio 2014.
Clicca per espandere/ridurre CSS

I fogli di stile a cascata (dall'inglese CSS Cascading Style Sheets) sono una tecnica che permette di fissare gli stili (per es. tipo di carattere, colori e spaziature) da applicare ai documenti HTML e XHTML. L'introduzione di tale tecnica si è resa necessaria proprio per separare i contenuti dalla formattazione e permettere così una programmazione più chiara e facile da utilizzare, sia per gli autori delle pagine HTML che per gli utenti.

Le regole per comporre i fogli di stile sono contenute in un insieme di direttive (Reccomandations) emanate a partire dal 1996 dal W3C. Le specifiche CSS 2, naturale evoluzione dei CSS 1, sono state emanate nel 1998 e il CSS 2.1 nel 2004. Le specifiche CSS 3, invece, non sono ancora state pubblicate, anche se il W3C da costantemente informazioni circa lo stato di sviluppo.
Clicca per espandere/ridurre In WebSite X5

WebSite X5 genera automaticamente codice HTML5 e utilizza i Fogli di stile (CSS 2.1 o CSS 3 a seconda del supporto garantito dai Browser) per definire come i contenuti devono essere visualizzati. La produzione di questo tipo di codice consente di ottenere una serie di rilevanti vantaggi, fra cui:

§aderenza agli standard internazionali;

§ampia compatibilità con i principali Browser;

§maggiori possibilità di una corretta e completa indicizzazione da parte dei Motori di ricerca.

Per quanto concerne l'utilizzo dei Fogli di stile, è bene sottolineare che le Pagine vengono costruite in maniera da poter essere correttamente fruite anche se l'Utente disattiva i CSS durante la navigazione. In questo caso, le Pagine vengono linearizzate: questo significa che si perdono le formattazioni e gli elementi grafici ma rimangono i contenuti presentati in maniera sequenziale e corredati da link interni (skip link altrimenti non visibili) che rendono più semplice la navigazione.

È possibile verificare la navigazione con i Fogli di stile disabilitati utilizzando le apposite funzioni messe a disposizione dai Browser.

Maggiori informazioni su HTML, CSS, standard, procedure di validazione del codice e molti altri argomenti correlati sono disponibili direttamente sul sito del World Wide Web Consortium (W3C): www.w3.org.


Browser

I Browser Web & il Browser di WebSite X5

Approfondimenti >

I Browser Web & il Browser di WebSite X5

 Return to chapter overview
Mostra/Nascondi testo nascosto

Un Browser è un'applicazione software che consente all'Utente di visualizzare e interagire con le informazioni (testi, immagini, ecc.) presenti all'interno di una Pagina Web. Attualmente, sono disponibili numerosi Browser, fra cui i più noti e diffusi sono Microsoft Explorer®, Firefox®, Safari® e Google Chrome™.

Per procedere alla visualizzazione dei contenuti Web, i Browser sfruttano un motore di rendering, ovvero un software che, una volta scaricati i contenuti (per esempio una Pagina HTML) formatta le informazioni ad essi relative (per esempio, i CSS collegati) e li mostra sullo schermo. Browser diversi sfruttano motori di rendering diversi e questi ultimi si differenziano proprio per la qualità della renderizzazione, rispetto agli standard, e per la velocità della stessa. Ne consegue che una stessa Pagina Web può essere resa in maniera anche molto diversa in base al Browser utilizzato. In qualsiasi caso, dal momento che una Pagina Web non è una pagina stampata, un certo margine di variabilità è accettabile a patto che l'esperienza d'uso dell'Utente non ne risulti danneggiata.

Il modo migliore per ottenere Pagine Web compatibili con i principali Browser, nelle loro diverse versioni, è di creare un codice quanto più pulito e conforme agli standard.

WebSite X5, generando automaticamente codice HTML5 con CSS 2.1 o 3 collegati, è in grado di garantire piena compatibilità con tutti i principali Browser oltre che con dispositivi mobili come cellulari, palmari e smartphone.

Clicca per espandere/ridurre Il Browser interno di WebSite X5

Durante lo sviluppo di un Progetto è necessario poter verificare quale sarà il risultato finale e come verrà visualizzato il Sito una volta che sarà online. Per questo, WebSite X5 permette di richiamare, attraverso il pulsante Anteprima sempre disponibile (vedere, L'ambiente di lavoro), un'Anteprima del Sito in locale che viene mantenuta costantemente aggiornata (vedere, Aggiorna Anteprima durante la modifica del Progetto in finestra Preferenze).

Per la visualizzazione dell'Anteprima, WebSite X5 utilizza un suo Browser interno basato su Chromium (http://www.chromium.org/), il Browser open source da cui deriva Google Chrome™. Tale Browser interno presenta i seguenti comandi:

Indietro

Torna indietro alla Pagina precedentemente visitata.

Avanti

Permette di andare avanti e aprire nuovamente una Pagina già visitata.

Pagina iniziale

Torna alla Home Page del Sito.

Barra degli indirizzi

Riporta il percorso della Pagina visualizzata e/o permette di specificare il percorso della Pagina che si intende visualizzare.

Vai

Avvia il caricamento della Pagina raggiungibile al percorso immesso nella barra degli indirizzi. In alternativa, è possibile confermare l'indirizzo immesso attraverso il tasto INVIO.

Modifica questa Pagina

Torna al Programma, aprendo la Pagina al momento visualizzata in anteprima nel Browser direttamente all'interno della finestra Creazione della Pagina, in modo da permetterne la modifica. Nel caso di Pagine appartenenti al Blog, all'Area Riservata o al Carrello e-commerce, questo pulsate permette di tornare alla relativa sezione del Passo 4 - Impostazioni Avanzate.

Da segnalare che una volta aperta la finestra del Browser per avere l’anteprima in locale del Progetto a cui si sta lavorando, la Pagina visualizzata cambia automaticamente in base alla Pagina su cui si sta lavorando. Questo significa che se si passa a lavorare a una Pagina diversa, questa stessa Pagina viene aperta anche nell’Anteprima nel Browser.

L'impiego di un Browser interno per la visualizzazione dell'Anteprima del Sito in costruzione consente di ottenere i seguenti vantaggi:

§l'Anteprima non si sostituisce al Sito visualizzato nella finestra del Browser predefinito eventualmente aperta;

§l'Anteprima del Sito in costruzione viene aggiornata nella finestra del Browser interno e non porta all'apertura di finestre o schede diverse del Browser predefinito.


motori di ricerca

Motori di ricerca e Ottimizzazione SEO

Approfondimenti >

Motori di ricerca e Ottimizzazione SEO

 Return to chapter overview
Mostra/Nascondi testo nascosto

Anche se si tende a parlare genericamente di "motori", in realtà è possibile distinguere tra 2 diversi sistemi di ricerca su Web:

§Directory

Possono essere definite come cataloghi di siti: personale umano, sulla base di segnalazioni esterne, seleziona i siti e li cataloga secondo una classificazione per tipo.

L'inserimento nella categoria può essere sia a pagamento che gratuita. In genere, per incrementare le loro banche dati, le directory utilizzano come seconda sorgente dei motori con i quali stringono degli accordi: di conseguenza, l'inserimento in alcune directory può essere importante per migliorare il posizionamento sui motori che vi fanno riferimento (per esempio, essere in Dmoz aiuta il posizionamento su Google™).

Directory famose sono Yahoo, Virgilio, Arianna, Dmoz.

§Motori

Possono essere definiti come database di pagine di siti. Anche se su alcuni motori è possibile richiedere l'inserimento dei siti, nella maggior parte dei casi tale inserimento avviene grazie al passaggio di uno spider che scandaglia il Web seguendo le catene di link che partono dalle pagine già presenti nel database.

Dunque, il lavoro di un motore si divide in 3 fasi:

1.Analisi del Web tramite l'impiego di spider (o crawler o robot). È importante sapere che gli spider possono essere assimilati a un browser dalle capacità di lettura piuttosto limitate: dunque, un motore non legge tutte le parti grafiche di un sito, le animazioni Flash (anche se sono stati fatti dei passi avanti in merito), il codice JavaScript, le parti in ASP o in PHP.

2.Catalogazione delle pagine ottenute, secondo criteri che possono variare da un motore all'altro.

3.Risposta alle richieste dell'utente. Per fornire una risposta a una richiesta il motore deve poter valutare la rilevanza delle pagine rispetto alla richiesta: estrapolati dal database i documenti che contengono la parola chiave immessa dall'utente, ne viene stabilita la rilevanza attraverso algoritmi proprietari che vengono nel tempo sempre più affinati. Alla fine i risultati vengono forniti nelle SERP (Search Engine Result Pages, Pagine dei risultati dei motori di ricerca).

Fra i Motori di ricerca il più noto e utilizzato è sicuramente Google™. I Motori di ricerca italiani più utilizzati sono Libero e Virgilio che, però, si limitano a riproporre i risultati di Google™.

Clicca per espandere/ridurre Come e perché essere presenti nei Motori

Il Web rappresenta ormai un bacino immenso di informazioni e le statistiche confermano che gli utenti ricorrono soprattutto ai Motori di ricerca per orientarsi e individuare le pagine di interesse. Da questa semplice considerazione emerge quanto sia importante comparire nei risultati dei Motori di ricerca (SERP) per le parole chiave identificate.

Realisticamente, ottenere un buon posizionamento su chiavi significative presuppone una strategia a lungo termine, più o meno articolata e complessa in relazione a quanto si è disposti ad investire e agli obiettivi che si vogliono ottenere.

Le scelte e le attività che concorrono a rendere e a mantenere visibile un sito su un Motore sono numerose e molteplici ma fra queste occorre soffermarsi su:

§La scelta delle chiavi

Per "chiave" si intende la parola o il gruppo di parole che il navigatore inserisce come stringa di ricerca sui motori. Per selezionare le chiavi su cui lavorare è possibile procedere nel seguente modo:

1.Stendere un primo elenco di chiavi che risultano essere attinenti ai temi trattati nel sito. Un buon suggerimento per stendere tale elenco è di provare a immaginare quali parole gli utenti potrebbero utilizzare per cercare il sito in questione; un'altra strategia è di cercare di individuare per quali chiavi sono ottimizzati i siti dei diretti concorrenti.

2.Effettuare un'analisi sulle statistiche fornite da alcuni motori per identificare e privilegiare le chiavi maggiormente ricercate e, quindi, in grado di generare un maggior traffico.

3.Utilizzare i tool di suggerimenti di Google™ per ampliare la lista con le chiavi collegate.

§L'ottimizzazione

Per ottimizzazione si intendono le attività intraprese per far sì che le pagine di un sito piacciano ai motori di ricerca e, di conseguenza, risultino ben posizionate su specifiche chiavi.

Innanzi tutto occorre ordinare le chiavi identificate in modo da ottenere una piramide con in cima la chiave più importante, al secondo livello un gruppo di 2 o 3 chiavi leggermente meno importanti e così a scendere fino alla base con tutte le chiavi rimanenti e in qualche modo collegate. Ogni pagina del sito dovrà essere ottimizzata per una sola parola chiave, la più importante, e dovrà avere una leggera ottimizzazione per le chiavi poste al secondo livello della piramide. Considerando l'intero sito è importante che vi siano molte pagine ottimizzate per la chiave al primo livello e un numero inferiore di pagine ottimizzate in modo da avere le chiavi di secondo livello come chiavi principali.

A questo punto occorre utilizzare le chiavi per la composizione di tag, meta-tag e contenuti.

§Tag <Title>

Rappresenta uno degli elementi più importanti per il posizionamento di una pagina: basti pensare che, quando effettua una ricerca, Google™ guarda per prima cosa il contenuto del tag <Title> cercando di confrontare le parole in esso contenute con quelle presenti nel testo e nei link della pagina.

Dunque, un buon Title deve:

·essere composto da 2/4 parole e non superare, comunque, i 60 caratteri;

·contenere la chiave più importante senza essere esattamente uguale alla chiave;

·essere coerente con la pagina e non essere uguale per tutto il sito.

§Meta Tag <Description>

In molti casi, viene visualizzata assieme al Title nella pagina dei risultati (SERP) e le statistiche confermano che i click sulle prime posizioni sono influenzate proprio dalla descrizione e da quanto questa risulta in grado di attirare l'attenzione dell'utente, in relazione ai suoi interessi.

Una buona Description deve:

·essere composta da una frase di senso compiuto;

·contenere la chiave più importante e alcune di secondo livello;

·essere coerente con la pagina e non essere uguale per tutto il sito;

·essere in grado di attirare l'attenzione e dare informazioni rilevanti.

§Attributo ALT

L'attributo ALT del TAG <IMG> serve per prevedere un'alternativa testuale che possa essere utilizzata in tutte le situazioni in cui l'elemento <IMG> stesso non può essere visualizzato: per esempio, a causa di un errato caricamento, oppure perchè si sta navigando attraverso browser testuali o screen reader.

Mentre le immagini non vengono prese in considerazione dai Motori, le alternative testuali ad esse collegate vengono considerate a tutti gli effetti come parti integranti del testo.

Ai fini dell'accessibilità del sito, l'alternativa testuale non deve essere una semplice descrizione dell'immagine ma avere la stessa funzione che l'immagine stessa ha nel contesto della pagina.

Ai fini dell'ottimizzazione, l'attributo ALT deve:

·essere composta da una frase di senso compiuto;

·avere lo stesso tema della pagina;

·devono essere tutte diverse;

·se possibile, deve essere attinente all'immagine ed al nome del file dell'immagine;

·almeno una nella pagina, deve contenere la chiave principale;

·buona parte delle chiavi principali dovrebbe trovare posto in un ALT.

§Attributo Title

L'attributo Title del TAG <A> serve per prevedere un testo che viene visualizzato nella Tooltip che compare quando si posiziona il mouse sul collegamento. Lo scopo di questa nota è di rendere chiaro all'utente cosa accade attivando il collegamento: si apre una nuova finestra, viene proposto un file .PDF, ecc.

Ai fini dell'ottimizzazione del sito, l'attributo Title dei link dovrebbe:

·essere composto da una frase di senso compiuto;

·essere attinente alla pagina puntata dal link;

·se possibile, devono avere lo stesso tema della pagina;

·devono essere tutti diversi;

·almeno uno nella pagina, deve contenere la chiave principale;

·buona parte delle chiavi principali dovrebbe avere un attributo Title che le contenga.

§Meta Tag <Keywords>

Originariamente importante, visto l'abuso che ne è stato fatto, non è più così considerato dai Motori.

Un buon Meta Tag <Keywords> dovrebbe:

·contenere la chiave principale della pagina;

·contenere alcune delle chiavi di secondo livello;

·contenere solo parole presenti nel testo visibile della pagina o negli ALT delle immagini;

·essere di tre, quattro frasi chiave al massimo, separate da virgola.

§Immagini

Le immagini concorrono a definire l'argomento di una pagina e, in qualsiasi caso, possono essere loro stesse il risultato di una ricerca.

Per le immagini si dovrebbe:

·scegliere un nome attinente sia all'immagine che alla pagina;

·se possibile, il nome dell'immagine dovrebbe contenere la chiave principale;

·ogni immagine dovrebbe avere un nome diverso e contenere chiavi diverse;

·seguire quanto indicato sopra per la clausola ALT;

·inserire l'immagine in una parte di testo che tratti lo stesso argomento.

§Link out-bound

Si definiscono link out-bound i collegamenti che dalla pagina di un sito puntano a pagine di altri siti: sono molto importanti per il posizionamento dal momento che consentono di aumentare l'attinenza a un tema. È presumibile, infatti, che i link leghino pagine fra loro in relazione consentendo a chi naviga di estendere le proprie ricerche in maniera pertinente.

Nel creare link out-bound ci si dovrebbe attenere alle seguenti regole generali:

·ogni pagina dovrebbe contenere un paio di link in uscita dal sito, al massimo 5 o 6;

·è opportuno linkare pagine a tema;

·i link devono avere un testo alternativo a tema con la pagina puntata e, se possibile, con quella da cui parte il link;

·del gruppo di link in uscita, almeno uno dovrebbe contenere la chiave principale della pagina;

·i title del link deve essere a tema con la pagina puntata e, se possibile, con la pagina di partenza;

·i link devono essere periodicamente controllati, per rimuovere quelli che puntano a pagine non più esistenti;

·se possibile, qualche link dovrebbe essere nel testo della pagina, in una parte attinente allo stesso;

·mai puntare siti penalizzati o spam-engine.

§I testi

I testi delle pagine sono il fattore più importante in relazione al posizionamento. Ogni pagina dovrebbe trattare un unico argomento in modo da incrementare l'attinenza al tema. Il testo della pagina deve essere ovviamente significativo e, anche per quanto riguarda le dimensioni, consistente: almeno 250 parole, ma ancor meglio 400 o 500 parole. Le chiavi identificate devono essere riprese all'interno dei testi ma occorre prestare attenzione al numero delle loro ripetizioni (key density): chiavi di una singola parola dovrebbero avere una densità del 10%, chiavi di due parole, invece, di circa il 15-20%. È importante che soprattutto la chiave più importante abbia un buon numero di ripetizioni ma è altrettanto fondamentale non eccedere nel ripetere la stessa chiave (key stuffing). Nel sito, nel complesso, ci deve essere un numero di pagine dedicate alla chiave più importante superiore di quelle dedicate a chiavi meno importanti.
Clicca per espandere/ridurre In WebSite X5

Il primo fattore da sottolineare per spiegare come WebSite X5 favorisca l'indicizzazione e il posizionamento dei siti creati sui Motori di ricerca riguarda il tipo di codice generato: WebSite X5 genera, del tutto automaticamente, pagine in HTML5 e gestisce la presentazione dei contenuti attraverso fogli di stile (CSS) collegati. Il codice "standard compliance" generato piace ai Motori di ricerca perché può essere facilmente interpretato dagli spider, ovvero dai software impiegati per scandagliare la rete alla ricerca di nuove pagine da inserire nei database.

Detto questo, occorre poi evidenziare come WebSite X5 consenta di intervenire su Tag, Meta Tag e attributi sopra citati, al fine di consentire l'ottimizzazione delle pagine sulle chiavi identificate. In più, WebSite X5 crea e collega in automatico la mappa del sito, con collegamenti testuali a tutte le pagine presenti: la SiteMap rappresenta uno strumento prezioso per i Motori dal momento che la possono utilizzare per raggiungere tutte le pagine presenti e indicizzarle.


Come funzione il Motore di Ricerca interno di WebSite X5

Come funziona il Motore di Ricerca interno di WebSite X5

Approfondimenti >

Come funziona il Motore di Ricerca interno di WebSite X5

 Return to chapter overview
Mostra/Nascondi testo nascosto

WebSite X5 permette di inserire all'interno dell'Intestazione / Piè di Pagina del Modello (vedere, Modifica del Modello | Inserisci Campo di Ricerca) un Campo per effettuare la Ricerca all'interno dei contenuti del Sito. Nello specifico, il Motore è in grado di estendere la ricerca su Pagine, Immagini, Video, Prodotti del Carrello e-commerce e Blog: i risultati della ricerca, ordinati in base alla loro pertinenza, vengono poi restituiti in Pagine che vengono create automaticamente dal Programma.

Clicca per espandere/ridurre Su cosa si basa il Motore di Ricerca

Per sfruttare al meglio il Motore di ricerca interno di WebSite X5 occorre sapere che:

§Pagine

Gli elementi della Pagina presi in considerazioni dal Motore sono: Titolo, Descrizione e Parole chiave (vedere, finestra Proprietà Pagina |Generale) oltre che, ovviamente, i Contenuti testuali.

§Immagini / Video

Il Motore di ricerca prende in considerazione solo le Immagini e i Video che sono stati aggiunti nella SiteMap attraverso l'apposita opzione (vedere, Oggetto Immagine | SiteMap o Oggetto Video/Suono | SiteMap) e analizza tutte le informazioni introdotte per questo scopo: Titolo, Descrizione breve e Posizione geografica per le Immagini; Titolo, Descrizione breve, Categoria, Parole chiave per la ricerca e Data di pubblicazione per i Video.

§Prodotti del Carrello e-commerce

Il Motore interno estende la ricerca su tutti i Prodotti inclusi nel Carrello di e-commerce, analizzandone il Nome/Codice e la Descrizione associata (vedere, finestra Impostazioni Prodotto | Generale).

§Blog

Tutte le Pagine del Blog sono incluse nella ricerca; vengono analizzati: Titolo, Autore, Categoria, Tag, Descrizione breve e Contenuto di ciascun Post.

§Area riservata

Le Pagine Protette attraverso Login e Password (all'interno di un'Area riservata) non vengono prese in considerazione dal Motore di Ricerca interno se prima non è stato effettuato il Login da parte dell'Utente.

§Pagine non visibili

Le Pagine impostate come Non visibili sul Menu di navigazione rientrano normalmente fra quelle considerate dal Motore di Ricerca interno.

§Per escludere una Pagina dalla ricerca

Per fare in modo che una Pagina non venga presa in considerazione dal Motore di ricerca interno è sufficiente selezionarla all'interno della Mappa, richiamare la finestra Proprietà Pagina e, nella Sezione Esperto deselezionare l'opzione Inserisci questa Pagina nella SiteMap.

§Maiuscole/Minuscole

Il Motore di ricerca non è case-sensitive: questo significa che considera uguali le lettere maiuscole e le lettere minuscole.

I diversi parametri presi in considerazione dal Motore di ricerca hanno una rilevanza diversa: per esempio, le occorrenze identificate nei Titoli delle Pagine hanno grande importanza. Le occorrenze identificate per alcuni parametri, quindi, vengono automaticamente moltiplicate per un fattore di correzione prima di essere associate alle altre occorrenze.

In base poi al numero di occorrenze così calcolato viene definita la rilevanza, e quindi la posizione, di ciascun risultato presentato all'interno della Pagina che restituisce i risultati della ricerca.
Clicca per espandere/ridurre Le Pagine con i risultati della Ricerca

Le Pagine con i risultati della ricerca vengono automaticamente create dal Programma e propongono:

§il campo di ricerca, già presente nell'Intestazione o nel Piè di Pagina del Modello;

§un menu laterale che permette di scegliere se visualizzare i risultati relativi alle Pagine, al Blog, all'E-commerce, alle Immagini o ai Video. Di fianco a ciascuna voce di tale menu viene riportato tra parentesi il numero dei risultati della ricerca totalizzati. Se non ci sono risultati per la ricerca in una determinata categoria, non viene inserita la voce relativa nel menu di Pagina.

§l'elenco dei risultati della ricerca, ordinati in base alla pertinenza calcolata.

È importante sottolineare che nel caso delle Pagine con i risultati della ricerca su Immagini e Video, è possibile cliccare direttamente su un'immagine o su un video per aprirlo direttamente all'interno della Pagina del Sito in cui è inserito.

Il Motore di ricerca interno è particolarmente utile per i Siti che propongono in vendita un ricco catalogo di Prodotti: le Pagine con i risultati della ricerca presentano non solo una descrizione completa dei Prodotti ma anche il pulsante Acquista per permettere ai Clienti di procedere immediatamente con l'ordine.

Le Pagine con i risultati della ricerca vengono create in automatico dal Programma: l'aspetto grafico di tali Pagine è stabilito dalle impostazioni definite al Passo 4 - Impostazioni Avanzate, nella sezione Stili e Modelli e, per quanto riguarda il Menu di Pagina, nella sezione Stile del Menu di Pagina.


Il Box Model in WebSite X5

Approfondimenti >

Il Box Model in WebSite X5

 Return to chapter overview

In WebSite X5 le Pagine vengono create attraverso l'ausilio di una Griglia e l'impaginazione può essere perfezionata agendo sui margini delle Celle, modificabili grazie alle opzioni Margine esterno e Margine interno presenti in Stile della Cella | Stile.

Per meglio comprendere cosa si intende per Margine e riuscire ad agire con precisione sull'impaginazione dei contenuti è necessario comprendere il Box Model utilizzato.

Quando si scrive il codice di una Pagina Web, tutti gli elementi HTML vengono considerati come dei blocchi (o box) e tutto l'insieme di regole che gestisce l'aspetto visuale di tali elementi blocco viene indicato come Box Model. Ogni box comprende un certo numero di componenti di base, ciascuno modificabile con proprietà dei CSS: margini, bordi, padding e contenuto.

L'immagine seguente illustra le parti del Box Model:

In WebSite X5 la Griglia di impaginazione proposta identifica una serie di Celle in cui è possibile inserire i diversi contenuti: per ciascuna di tali Celle si applica il Box Model illustrato.

Pertanto gli elementi sono:

§Contenuto (area in verde): è il contenuto inserito attraverso il trascinamento di uno degli Oggetti disponibili.

§Margine interno (area in fucsia): è lo spazio tra il contenuto attuale e il bordo.

§Bordo: è il bordo disegnato attorno al contenuto; l'aspetto di tale bordo può essere definito attraverso le opzioni della finestra Stile della Cella.

§Margine esterno (area in arancio): è lo spazio tra il bordo e le linee che definiscono la Griglia di impaginazione.

Date queste definizioni, lo spazio tra due Oggetti affiancati (in orizzontale o in verticale) è pari alla somma dei Margini Esterni impostati per le Celle che li contengono.


Navigazione

La struttura di navigazione di un Sito

Approfondimenti >

La struttura di navigazione di un Sito

 Return to chapter overview
Mostra/Nascondi testo nascosto

Dopo aver progettato la struttura di un Sito e averne stabilito l'architettura informativa, si dovrebbero avere le idee sufficientemente chiare per procedere alla definizione della navigazione. Innanzi tutto occorre individuare la navigazione fissa, ovvero le voci di menu che devono essere presenti in tutte le pagine, quindi si deve articolare la navigazione locale, ovvero i menu contestuali interni alle aree principali del Sito. Alla navigazione fissa e locale si possono aggiungere menu con link di servizio che devono trovare una collocazione fissa ma distinta da quelle delle macro-aree del Sito.

Generalmente alla navigazione fissa viene dedicata una banda orizzontale, posta nella parte superiore della pagina, mentre i menu contestuali vengono sviluppati verticalmente, sulla colonna a sinistra della pagina. Comunque, nel caso in cui le aree principali del Sito siano troppo numerose o si desideri dare una sensazione di maggiore dinamicità, è possibile presentare anche la navigazione fissa tramite un menu verticale.

In WebSite X5 la definizione della struttura navigazione avviene in due passaggi:

- | nella finestra Scelta del Modello o nella finestra Modello Personalizzato: occorre scegliere il Menu verticale per avere la navigazione fissa posta sulla colonna sinistra della Pagina o, in alternativa, Menu orizzontale per avere la navigazione fissa in orizzontale.
- | nella finestra Creazione della Mappa: occorre creare la struttura ad albero del Sito, inserendo opportunamente Livelli e Pagine. La struttura ad albero del Sito può prevedere più livelli di indentazione: le voci di primo livello corrispondono alle voci della navigazione fissa; le voci degli altri livelli corrispondono, invece, alle voci della navigazione locale.

In base alla scelta del tipo di menu e alla mappa, WebSite X5 genera automaticamente il menu di navigazione del Sito.

È importante sottolineare che tutte le voci del menu di navigazione vengono create come semplici collegamenti testuali presenti all'interno del codice HTML della Pagina e poi gestite attraverso un foglio di stile (CSS) appositamente collegato. Questo tipo di codice consente di ottenere i seguenti vantaggi:

§corretto funzionamento sui principali Browser, anche durante la navigazione con JavaScript disabilitato;

§corretta indicizzazione da parte dei Motori di ricerca che, grazie ai link testuali nelle Pagine, riescono a ripercorrere agevolmente la struttura del Sito.

Opzionalmente, con WebSite X5 è poi possibile ottenere:

§la visualizzazione dei menu contestuali in un'apposita colonna a sinistra o a destra del contenuto della pagina, attivando l'opzione Visualizza Menu di Pagina presente nella finestra Passo 4 - Stile del Menu di Pagina;

§la ripetizione delle voci di navigazione fissa in un apposito menu a fondo pagina, accedendo al Passo 4 - Stili e Modelli, selezionando l'Elemento della Pagina "Menu di fondo Pagina" e attivando l'opzione Visualizza;

§la visualizzazione del menu a briciole di pane, attivando l'opzione Visualizza per l'Elemento della Pagina "Percorso della Pagina" nella finestra Passo 4 - Stili e Modelli;

§un menu di servizio posizionato nel banner superiore, sfruttando la possibilità di inserire immagini e collegamenti con l'editor messo a disposizione nella finestra Modifica del Modello.

Oltre alla navigazione fissa e contestuale, in genere i siti Web prevedono link interni che, rendendo più completa e complessa l'originaria struttura ad albero, creano percorsi di consultazione alternativi: in WebSite X5 è possibile impostare questo tipo di collegamenti sia su testi che immagini utilizzando l'apposito comando Inserisci collegamento.

Alcuni fattori che incidono sensibilmente sulla qualità della struttura di navigazione di un Sito sono:

Clicca per espandere/ridurre Il labeling dei pulsanti

Un fattore cruciale nel determinare la qualità della struttura di navigazione di un Sito è il "labeling", ovvero la definizione dei nomi dei pulsanti. I nomi scelti devono essere chiari e comprensibili: è meglio non tentare la strada dell'originalità e ricorrere piuttosto a espressioni diffuse e largamente utilizzate anche sugli altri Siti.

In WebSite X5 le label dei pulsanti che compongono i Menu corrispondono ai nomi dati a Livelli e Pagine durante la costruzione della Mappa del Sito (vedere, finestra Creazione della Mappa). Questi nomi vengono automaticamente ripresi anche per definire i titoli delle Pagine e i nomi dei file HTML corrispondenti alle Pagine stesse. Attraverso le apposite opzioni presenti nella finestra Proprietà Pagina è però possibile impostare un titolo e un nome del file diverso per ciascuna Pagina. In questo modo, è possibile diversificare i testi in modo da definire un adeguato labeling dei pulsanti del Menu e un sistema di titolazione opportuno non solo ai fini della comprensione del testo ma anche dell'indicizzazione da parte dei Motori di ricerca.
Clicca per espandere/ridurre Il testo dei collegamenti ipertestuali

I test di usabilità sottolineano che i Menu non sono sempre la strada principale per accedere alle informazioni di un Sito: solitamente vengono impiegati dai Visitatori abituali o da quelli che hanno le idee molto chiare su cosa stanno cercando. Invece, la navigazione su Siti sconosciuti sfrutta soprattutto i link testuali presenti nel contenuto delle Pagine: da questo deriva l'importanza di questo tipo di link.

Sintetizzando, il testo di un collegamento deve essere conciso, esplicativo rispetto alla risorsa a cui porta e significativo anche se estrapolato dal contesto.

§Testi privi di significato

È importante che i link mantengano il loro significato anche quando vengono estratti dal contesto: espressioni come "clicca qui", "maggiori informazioni", "info", che risultano superflue anche quando inserite all'inizio di una frase, vanno evitate accuratamente. Una testo come "Clicca qui" non contiene alcuna informazione su ciò che verrà visualizzato seguendo il collegamento stesso: è scarsamente significativo sia per i Visitatori che per i Motori di ricerca, molti dei quali usano proprio i testi dei collegamenti per stimarne la rilevanza.

§Lunghezza dei link

È difficile stabilire a priori quanto deve essere lungo al massimo il testo di un collegamento. In linea generale il testo di un link deve essere lungo a sufficienza per esprimerne lo scopo: in altre parole, i testi dei collegamenti devono essere quanto più concisi possibile senza però che questo si traduca in perdita di significato.

§Le URL nei collegamenti

In alcuni casi può essere opportuno immettere come testo di un link direttamente una URL (per es, http://www.miosito.it). Bisogna considerare, però, che non sempre le URL sono significative e che possono essere molto lunghe. Se si verificano queste condizioni, è meglio modificare il testo del link in modo da renderlo più comprensibile.

§Testi alternativi per le immagini utilizzate come link

Quando un'immagine viene impiegata come link, il testo alternativo (ALT Text) ad essa associato assume la stessa funzione del testo di un collegamento testuale. Nel comporre il testo alternativo di queste immagini occorre ricordare che non è necessario specificare che si tratta di un link e che lo scopo del testo ALT non è quello di descrivere un'immagine ma di fornire un contenuto che ne svolga la stessa funzione. Così, per l'immagine di un pulsante su cui compare la scritta "Prodotti", come testo alternativo potrebbe essere inserito semplicemente "Prodotti".
Clicca per espandere/ridurre L'aspetto dei collegamenti

Un altro fattore che incide sulla qualità della struttura di navigazione, oltre che sull'accessibilità dei collegamenti, è l'aspetto, ovvero come vengono resi graficamente.

§Sottolineatura

È fondamentale che il Visitatore possa riconoscere e individuare con sicurezza i link presenti in una Pagina: è un'esperienza frustrante cliccare su testi scambiati per collegamenti o spostare il mouse a caso attendendo che il puntatore si trasformi quando passa su un'area attiva o che appaia una Tooltip.

Di default i Browser impostano la sottolineatura su tutti i link: è possibile rimuoverla ma, nella maggior parte dei casi, è meglio non farlo. La sottolineatura dei collegamenti è, infatti, diventato uno standard abbastanza consolidato e non viene rispettata solo nelle voci dei menu principali. Inoltre, distinguere i link solo in base al colore è una tecnica contraria all'accessibilità: è difficile o impossibile, infatti, distinguere un link solo in base al colore se si usa un monitor in scala di grigi, se si legge la pagina stampata in bianco e nero o se si è daltonici.

§Colori

Tipicamente, i Browser rendono in blu i link non ancora visitati e in rosso quelli già visitati: rispettare questa convenzione permette di mantenere una significativa differenza fra i link già visitati e ancora da visitare (evitando l'errore di tornare a pagine già viste) e consente al Visitatore di muoversi con familiarità senza dover soffermarsi a ragionare sul funzionamento degli strumenti di navigazione che gli vengono messi a disposizione. È comunque possibile, e in casi specifici consigliabile, suggerire al Browser un set di colori diverso per i link: in questi casi è importante, però, rispettare il contrasto con il colore di sfondo della Pagina e mantenere una differenza significativa fra i colori scelti per ciascuno stato del collegamento.

§Effetti Hover e Focus

In molti siti, per motivi puramente estetici, vengono implementati effetti grazie al quale l'aspetto dei collegamenti (sia voci di menu che link nel testo) varia a seconda dello stato. L'utilizzo di questi effetti ha un risvolto positivo in termini di accessibilità in quanto aiuta il Visitatore a capire su quale collegamento è posto il focus.

WebSite X5 permette di personalizzare l'aspetto sia dei pulsanti che compongono i menu di navigazione sia dei link ipertestuali inseriti nelle Pagine:

§nella sezione Passo 4 - Impostazioni Avanzate vengono presentate le finestre per agire sulla grafica dei menu di navigazione (vedere, Stile del Menu Principale, Stile del Menu a Comparsa e Stile del Menu di Pagina) e, grazie a un editor integrato, è possibile ottenere pulsanti 3D con effetti di mouseover.

§sempre nella sezione Passo 4 - Impostazioni Avanzate, nella finestra Stili e Modelli, vengono presentate le opzioni per modificare l'aspetto dei link ipertestuali.
Clicca per espandere/ridurre La destinazione dei collegamenti

Nel determinare la qualità dell'esperienza d'uso di un Sito è importante che l'attivazione di un collegamento non sia vissuta come un salto nel buio: il Visitatore deve sapere subito cosa accadrà nel momento in cui cliccherà su un pulsante, un link o un'immagine.

§Collegamenti a risorse non HTML

I Visitatori dovrebbero essere avvisati quando un collegamento apre una risorsa diversa da una pagina HTML come, per esempio, file PDF, Word, PowerPoint, ecc. In questi casi, attualmente i Browser non danno alcuna informazione in merito e, quindi, viene lasciata all'Autore la scelta di indicare nel testo dei link il tipo di file, magari riportandolo in parentesi.

§Collegamenti con nuove finestre, finestre di Popup o altri siti Web

Il Visitatore dovrebbe essere avvertito se seguendo un link abbandona la finestra corrente per aprire una nuova finestra o una finestra di PopUp: tale cambio potrebbe, infatti, confonderlo rendendo inutilizzabile in pulsante per tornare indietro del Browser. Anche in questi casi, spetta a chi crea il Sito prevedere per i link un'indicazione del tipo "apre in una nuova finestra".

WebSite X5 consente di impostare collegamenti ipertestuali sia su porzioni di testo che su immagini, dando la possibilità di prevedere per ogni collegamento una descrizione.

Per definire il contenuto e l'aspetto della Tooltip è sufficiente accedere alla sezione Descrizione della finestra Collegamento.
Clicca per espandere/ridurre I collegamenti interni

Oltre ai collegamenti relativi ai menu di navigazione e a quelli inseriti direttamente nel contenuto delle Pagine, WebSite X5 crea e inserisce automaticamente dei collegamenti ad ancore interne che, durante la navigazione normale con il Browser, possono rimanere completamente invisibili.

Si tratta di skip link inseriti in punti strategici della Pagina per permettere di arrivare agevolmente ai contenuti, saltando i link di navigazione, o di andare ai link saltando i contenuti. Tali skip link non sono visualizzati dai Browser visuali: sono visibili, invece, quando si naviga disabilitando i fogli di stile.

In questa modalità di navigazione si vede anche che dopo i titoli del Sito, vengono presentate solo le voci di primo livello del menu di navigazione: seguono i contenuti principali della pagina, i sottomenu e le note e i link a piè di pagina. Questo tipo di organizzazione della Pagina è pensata per meglio mettere in evidenza i contenuti, ai fini di una miglior indicizzazione delle Pagine da parte dei Motori di ricerca e di una più agevole fruizione su dispositivi mobili.

Infine, partendo dalla struttura definita nella Creazione della Mappa, WebSite X5 crea e collega nel codice delle Pagine la Mappa linkata dell'intero sito: anche questa viene utilizzata dai Motori di ricerca per procedere all'indicizzazione. Tale Mappa può essere anche messa a disposizione dei Visitatori come ulteriore strumento di navigazione: il collegamento per richiamarla è automaticamente inserito nel menu visualizzato a fondo pagina (vedere, Stili e Modelli ) e/o può essere creato attraverso l'apposito azione presente nella finestra Collegamento.


Feed RSS: definizione ed usi

Approfondimenti >

Feed RSS: definizione ed usi

 Return to chapter overview
Mostra/Nascondi testo nascosto

In linea generale, RSS (acronimo di RDF Site Summary ed anche di Really Simple Syndication) può essere definito come uno dei più popolari formati per la distribuzione di contenuti Web. Da un punto di vista più tecnico, invece, un Feed RSS non è altro che un file XML che contiene in forma strutturata informazioni sulla Pagina al quale è legato e sui contenuti della stessa.

Il principio di funzionamento è semplice: molti Siti, soprattutto Blog, Forum, testate giornalistiche e Portali, presentano un Feed RSS sulle proprie Pagine attraverso il quale offrono notizie costantemente aggiornate. L'utente interessato può indicare al proprio programma news aggregator (sono disponibili anche servizi on-line e funzioni integrate direttamente nel Browser) i feed di suo interesse: il news aggregator li controlla con frequenza specificabile e riporta le novità individuate consentendo di leggere le news in modo del tutto identico a quanto consentono di fare i programmi di posta elettronica con le e-mail.

Derivano alcuni importanti vantaggi:

§utilizzando un news aggregator l'utente risparmia il tempo che dovrebbe dedicare a controllare su tutti i Siti di suo interesse se sono state pubblicate delle news;

§alcuni news aggregator consentono di produrre le news in formato solo testo rendendole facilmente fruibili anche da cellulare;

§grazie al meccanismo dei Feed RSS l'utente può confezionarsi un Web su misura.

Clicca per espandere/ridurre Un po' di storia

Il formato RSS fu lanciato da Netscape che nel 1999 produsse la versione 0.90 per gestire i contenuti del portale My Netscape Network. Seguì una versione più semplificata, la 0.91, ma poi Netscape ne abbandonò lo sviluppo.

Il formato venne quindi ripreso da Dave Winer come base dei sistemi di content management di Userland e, nel contempo, un gruppo di sviluppatori iniziò a lavorare su un altro formato di syndication basato su RDF, uno dei linguaggi standard del W3C, rilasciando la specifica RSS 1.0.

Non condividendo certi aspetti di complessità di RSS 1.0, Dave Winer proseguì per la propria strada, dando nuova vita al vecchio formato e rilasciando le versioni RSS 0.92, 0.93, 0.94, fino all'ultima: RSS 2.0. Per evidenziare la distanza da RSS 1.0 e sottolineare il carattere di semplicità della sua proposta, Winer ha dato al suo formato il nome di "Really Simple Syndication".

La situazione, dunque, è che ci sono due formati concorrenti per fare essenzialmente la stessa cosa: RSS 2.0 punta alla semplicità mentre RSS 1.0 guarda alla ricchezza semantica e all'estendibilità con moduli esterni. In più, i feed in formato RSS 0.91 o 0.92 sono ancora molto utilizzati, principalmente per la loro semplicità e per il fatto di essere più che sufficienti per una syndication di base.

Chi utilizza RSS non si deve preoccupare, comunque, dell'esistenza di tali formati: i news aggregator sono in grado di leggere tranquillamente tutti i formati. Il problema si pone soltanto per chi deve produrre un feed che, quindi, deve valutare cosa offrono i due formati.
Clicca per espandere/ridurre I news aggregator

I news aggregator sono "lettori" di feed RSS: sono programmi attraverso i quali è possibile aggregare, interpretare e visualizzare dati scritti e distribuiti in questo dialetto di XML.

Per molti aspetti, gli aggregatori sono simili ai programmi di posta elettronica, riproponendone l'interfaccia che prevede il classico layout a tre pannelli. In genere, nel pannello a sinistra trova posto la lista dei feed sottoscritti. Selezionandone uno, nel pannello superiore destro viene visualizzato l'elenco dei titoli, mentre in quello inferiore viene proposto il testo degli articoli o un loro riassunto. Tutti i principali news aggregator prevedono poi meccanismi per evidenziare gli articoli non letti e il loro numero o per contrassegnare gli stessi come letti o non letti.

Oltre all'interfaccia, anche il metodo di funzionamento è simile a quello dei client di posta elettronica: una volta sottoscritti i feed, si apre il news aggregator, si scaricano gli aggiornamenti e si leggono i contenuti.

Oltre ai news aggregator che si possono scaricare direttamente da Internet, è possibile sfruttare direttamente i Browser solitamente impiegati per navigare sul Web. Per venire incontro ai propri utenti, infatti, sia Microsoft che Mozilla hanno deciso di integrare nelle nuove versioni dei loro Browser (da Internet Explorer 7 e Mozilla Firefox 2.0) la funzionalità grazie alla quale, attraverso un foglio di stile, il contenuto grezzo di un feed viene formattato in modo da poter essere visualizzato in modo decisamente più user friendly (come succedeva già con Safari di Apple). Entrambe i Browser hanno lavorato molto su diverse funzioni orientate a questa tecnologia: fra queste, anche sull'individuazione dei feed associati ad una pagina attraverso l'autodiscovery link grazie al quale, ogni qualvolta si sta navigando su un sito che offre un feed RSS o Atom, il Browser avverte l'utente della sua presenza offrendo una lista di funzioni correlate.
Clicca per espandere/ridurre Come e dove trovare feed da sottoscrivere

Un primo indicatore della disponibilità di feed da sottoscrivere, specie sui Blog, è la presenza di alcune piccole icone:

In alternativa, si può trovare la parola "Syndication".

In genere sono semplici link che puntano al documento RSS. Per sottoscrivere il feed sarà sufficiente ricavare l'URL del documento (Click destro sull'immagine > Copia collegamento) e incollarlo nella casella che ogni programma ha in dotazione per aggiungere un nuovo feed.
Clicca per espandere/ridurre Il Feed RSS in WebSite X5

WebSite X5 consente di creare e gestire un Feed RSS senza preoccuparsi dell'implementazione del codice: è sufficiente specificare alcuni parametri generali e preoccuparsi della redazione delle notizie, il programma produrrà automaticamente i file XML relativi secondo il formato RSS 2.0.

Una volta aperto il Feed RSS, è possibile renderlo disponibile sul Sito prevedendo un apposito link testuale o un bottone (analoghi a quelli sopra presentati), magari posizionato direttamente nell'Intestazione del Modello. WebSite X5 consente di ricreare tale bottone utilizzando l'apposito link presente nella finestra Collegamento.


Blog: caratteristiche e funzionamento

Approfondimenti >

Blog: caratteristiche e funzionamento

 Return to chapter overview
Mostra/Nascondi testo nascosto

Wikipedia definisce il Blog come un diario in rete.

La parola "blog" nasce dalla contrazione di "web log", ovvero "traccia su rete". Precisamente, il termine "weblog" è stato introdotto nel 1997 da Jorn Barger che lo utilizzò nel suo sito personale; la versione tronca "blog" è stata invece creata da Peter Merholz che nel 1999 ha usato la frase "we blog" nel suo sito dando così origine al verbo "to blog" (ovvero: bloggare, scrivere un blog).

I weblog sono nati come un fenomeno dal basso, configurandosi come l'espressione di persone che semplicemente avevano qualcosa da dire e che hanno trovato nel Web uno strumento per poterlo fare agevolmente. Il fenomeno ha incominciato a prendere piede in America nel 2001 ed ha poi conosciuto una crescita esplosiva, diventando una moda anche in Italia grazie alla nascita dei primi servizi gratuiti dedicati.

I Blog si caratterizzano per la struttura che assumono, per i contenuti che presentano e per la forma in cui tali contenuti sono scritti.

Clicca per espandere/ridurre La struttura

Dunque un Blog è un Sito Web dove chi scrive (blogger) può pubblicare storie, informazioni, opinioni o, più in generale, ciò che vuole comunicare e condividere in completa autonomia, componendo in questo modo una sorta di diario personale.

I Blog attualmente presentano una struttura abbastanza standardizzata dove ogni articolo (o post) è numerato ed è contenuto in una pagina dedicata che, oltre al messaggio, presenta alcuni strumenti accessori come i commenti lasciati dai lettori. I post sono generalmente associati a delle categorie tematiche (thread) che costituiscono, di conseguenza, il primo dei due archivi più comuni. Il secondo è l'archivio per data, dove è possibile navigare i messaggi inseriti in un periodo temporale stabilito: generalmente un mese. Gli articoli vengono proposti in ordine inverso rispetto a quello di inserimento, dal più recente al più vecchio, e possono essere completati con immagini, contributi audio e video e link ad altri siti di interesse. Ogni post può essere individuato univocamente attraverso un permalink, ovvero un link che punta direttamente a quell'articolo. La sezione che contiene i link ad altri blog è definita blogrol.

A seconda delle necessità il blog può offrire anche altri strumenti accessori, come ad esempio un motore di ricerca interno e i Feed RSS: dal momento che un Blog prevede aggiornamenti frequenti e non organizzati, tali strumenti sono molto utili per per agevolare gli utenti nella consultazione dei contenuti.
Clicca per espandere/ridurre I contenuti

La vera essenza di un Blog sta nei contenuti: i messaggi sono generalmente una via di mezzo tra una notizia ed un articolo e spesso presentano una descrizione breve che ne riepiloga il senso, anche nell'ottica della struttura del Feed RSS.

I contenuti generalmente sono riconducibili ad una o più categorie del blog e, come detto, sono pubblicati in ordine cronologico. Gli argomenti dei post possono essere i più disparati a seconda del tipo di Blog. Sicuramente, la maggior parte dei blogger usa il Blog come diario personale, per far conoscere i propri sentimenti e le proprie opinioni ai lettori che, passando di link in link, si muovono per la blogsfera. Sono molto diffusi anche i blog tenuti da giornalisti, o aspiranti tali, e da scrittori; i blog umoristici, ironici o satirici; i blog mono-tematici dedicati ad un hobby o una passione dell'autore; i Blog Politici o di attualità; i Blog aziendali.

Fatta eccezione per quelli istituzionali o aziendali, i Blog normalmente non prevedono tempistiche o scadenze per la pubblicazione: è l'autore ad organizzarsi e spesso il Blog diventa il diario dove raccogliere i propri pensieri più o meno di getto, senza porsi particolari ordini o schemi.
Clicca per espandere/ridurre La forma

Strettamente legata ai contenuti è la forma: tipicamente i Blog sono scritti in prima persona dal momento che i contenuti sono normalmente il frutto di commenti, riflessioni e rielaborazioni personali. Non a caso, molti definiscono il Blog come un monologo scritto o, se si preferisce, la trascrizione dei propri pensieri.

Anche nel caso di Blog aziendali o commerciali i post mantengono quasi sempre la prima persona volendo rappresentare una voce più informale rispetto al sito Internet ufficiale.
Clicca per espandere/ridurre Il Blog in WebSite X5

WebSite X5 consente di creare e gestire un Blog in maniera molto semplice. Permette di procedere rapidamente nella composizione e pubblicazione dei post; di arricchire gli articoli con contributi multimediali quali immagini, audio e video; di attivare la ricezione di commenti e di sfruttare un apposito pannello di controllo on-line per gestirne la visualizzazione.

Il Blog realizzato presenterà tutti gli strumenti di ricerca e navigazione tipici: motore di ricerca interno, elenco degli articoli recenti, archivio per categorie e per mese, nuvole. I post inseriti verranno pubblicati uno di seguito all'altro nella pagina principale e verranno presentati in maniera completa ciascuno in una pagina dedicata.

Dato che WebSite X5 risolve tutti gli aspetti tecnici, occorre occuparsi unicamente degli aspetti redazionali ricordando che per creare un Blog di successo è consigliabile:

§Scegliere che tipo di Blog si vuole creare. È bene scegliere un'identità e un titolo che catturi l'essenza del Blog.

§Scrivere almeno un post ogni giorno o, perlomeno, aggiornarlo con una certa regolarità. Nel caso di Blog istituzionali sarebbe bene stabilire un calendario per la pubblicazione degli interventi.

§Scrivere e inserire materiale per almeno un mese prima di pubblicizzare il Blog. In questo modo si ha la possibilità di fare delle valutazioni ed eventualmente delle correzioni, al fine di orientare il Blog nella direzione desiderata.

§Quando il Blog ha preso forma per contenuti e stile, pubblicizzarlo parlandone ad amici e conoscenti o, nel caso di enti e aziende, utilizzando i canali più consoni (comunicati stampa, newsletter, ecc.).

§Per aumentare la popolarità del Blog in Internet, cercare altri Blog correlati per gli argomenti trattati e utilizzarli per far conoscere il proprio. In pratica, occorre leggere i post pubblicati sui Blog identificati e lasciare dei commenti, possibilmente pertinenti e costruttivi, ricordando di riportare al fondo un link al proprio Blog. Attenzione a non violare le regole editoriali dei Blog visitati!

§Costruire una rete di contatti con le altre persone nella blogosfera e incontrare degli amici online: questo è il modo migliore per far leggere il proprio Blog.

Se si riesce a rendere il proprio Blog popolare, per il numero di visite che riceve, e autorevole, per la qualità dei contenuti che offre, si potrà anche valutare la possibilità di trasformarlo in uno strumento di guadagno grazie all'inserimento della pubblicità.


Blog | Pannello di Controllo

Il Pannello di Controllo online

Approfondimenti >

Il Pannello di Controllo online

 Return to chapter overview

Per ogni Sito realizzato, WebSite X5 predispone automaticamente un Pannello di Controllo online utile per permettere all'Amministratore di compiere operazioni come: gestire i commenti lasciati dagli utenti ai post del Blog o i messaggi inseriti sul Guestbook e avere alcune informazioni di diagnostica sul Sito.

Al Pannello di Controllo possono accedere tutti gli Utenti inseriti nel Gruppo Amministratori nella sezione Gestione Accessi disponibile al Passo 4 - Impostazioni Avanzate.

Per accedere al Pannello di Controllo è sufficiente:

§Collegarsi alla URL http://www.miosito.it/admin dove http://www.miosito.it è la URL del Sito.

§Fare il login utilizzando le proprie credenziali di accesso (Login e Password).

Fatto il login, il Pannello di Controllo presenta alcune sezioni:

§Blog: permette di gestire i commenti lasciati dagli utenti in risposta ai Post del Blog collegato al Sito Web. (vedere Come gestire i commenti ai Post di Blog e Guestbook attraverso il Pannello di Controllo online)

§Guestbook: permette di gestire i messaggi lasciati dagli utenti sul Guestbook inserito nel Sito Web attraverso l'apposito Oggetto Guestbook.

§WebSite Test: permette di visualizzare alcune informazioni di diagnostica relative al Sito Web e al Server sul quale questo è stato pubblicato. Nello specifico i controlli effettuati riguardano:

-Versione di PHP installata - Perché funzioni correttamente l'invio delle e-mail previsto per l'Oggetto Modulo Invio E-mail e per il Carrello e-commerce, oltre che l'accesso alle Pagine Protette tramite login e Password è necessario che il Server supporti il linguaggio PHP. Viene, dunque, verificato se il Server offre tale supporto e, in caso affermativo, viene specificata quale versione di PHP è supportata.

-Supporto sessioni - Oltre al supporto per il PHP, affinché l'accesso alle Pagine Protette venga consentito solo dopo l'inserimento delle corrette credenziali di accesso, è necessario che il Server supporti anche le sessioni.

-Cartella con accesso in scrittura - Per poter archiviare e gestire i commenti ai Post del Blog e del Oggetto Guestbook, è necessario indicare una cartella su Server per la quale è consentita la scrittura attraverso le apposite opzioni. Viene prima verificato che la cartella con accesso in scrittura indicata esista realmente e, in caso affermativo, che nella cartella indicata sia permessa la scrittura di dati.

-Supporto MySQL ed impostazioni database - Nell'impostare un Oggetto Modulo Invio E-mail è possibile specificare come metodo di invio dei dati "Invia i dati ad un Database" (vedere Oggetto Modulo Invio E-mail | Invio): in questo caso occorre fornire i parametri per potersi collegare al Database su Server da utilizzare. Viene, quindi, verificato che il Server supporti MySQL e, in caso affermativo, che i parametri specificati consentano realmente di accedere ed operare sul Database.


Informazioni e Supporto

Informazioni e Supporto

 Return to chapter overview

è un prodotto Incomedia

www.websitex5.com

www.incomedia.eu

Copyright 2013 Incomedia. All rights reserved.

WebSite X5 utilizza DotNetZip che è coperto da Licenza Ms-PL (Microsoft Public License)

WebSite X5 utilizza Cef che è coperto da Licenza BSD 3.

WebSite X5 utilizza Cef Sharp che è coperto da Licenza BSD 2.

Per maggiori informazioni e per supporto tecnico visita il sito: www.websitex5.com/help


license_bsd3

Licenza BSD 3

Licenza BSD 3

 Return to chapter overview

Copyright (c) 2008-2012 Marshall A. Greenblatt. Portions Copyright (c)

2006-2009 Google Inc. All rights reserved.

Redistribution and use in source and binary forms, with or without

modification, are permitted provided that the following conditions are

met:

* Redistributions of source code must retain the above copyright

notice, this list of conditions and the following disclaimer.

* Redistributions in binary form must reproduce the above

copyright notice, this list of conditions and the following disclaimer

in the documentation and/or other materials provided with the

distribution.

* Neither the name of Google Inc. nor the name Chromium Embedded

Framework nor the names of its contributors may be used to endorse

or promote products derived from this software without specific prior

written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS

"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT

LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR

A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT

OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,

SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT

LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,

DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY

THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT

(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE

OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.


licenza_bsd2

Licenza BSD 2

Copyright (c) 2012, Anthony Taranto.

Redistribution and use in source and binary forms, with or without

modification, are permitted provided that the following conditions are

met:

* Redistributions of source code must retain the above copyright

notice, this list of conditions and the following disclaimer.

* Redistributions in binary form must reproduce the above

copyright notice, this list of conditions and the following disclaimer

in the documentation and/or other materials provided with the

distribution.

* Neither the name of Google Inc. nor the name Chromium Embedded

Framework nor the name CefSharp nor the names of its contributors

may be used to endorse or promote products derived from this software

without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS

"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT

LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR

A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT

OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,

SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT

LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,

DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY

THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT

(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE

OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.


Microsoft Public License (Ms-PL)

Microsoft Public License (Ms-PL)

 Return to chapter overview

This license governs use of the accompanying software. If you use the software, you accept this license. If you do not accept the license, do not use the software.

1. Definitions

The terms "reproduce," "reproduction," "derivative works," and "distribution" have the same meaning here as under U.S. copyright law.

A "contribution" is the original software, or any additions or changes to the software.

A "contributor" is any person that distributes its contribution under this license.

"Licensed patents" are a contributor's patent claims that read directly on its contribution.

2. Grant of Rights

(A) Copyright Grant- Subject to the terms of this license, including the license conditions and limitations in section 3, each contributor grants you a non-exclusive, worldwide, royalty-free copyright license to reproduce its contribution, prepare derivative works of its contribution, and distribute its contribution or any derivative works that you create.

(B) Patent Grant- Subject to the terms of this license, including the license conditions and limitations in section 3, each contributor grants you a non-exclusive, worldwide, royalty-free license under its licensed patents to make, have made, use, sell, offer for sale, import, and/or otherwise dispose of its contribution in the software or derivative works of the contribution in the software.

3. Conditions and Limitations

(A) No Trademark License- This license does not grant you rights to use any contributors' name, logo, or trademarks.

(B) If you bring a patent claim against any contributor over patents that you claim are infringed by the software, your patent license from such contributor to the software ends automatically.

(C) If you distribute any portion of the software, you must retain all copyright, patent, trademark, and attribution notices that are present in the software.

(D) If you distribute any portion of the software in source code form, you may do so only under this license by including a complete copy of this license with your distribution. If you distribute any portion of the software in compiled or object code form, you may only do so under a license that complies with this license.

(E) The software is licensed "as-is." You bear the risk of using it. The contributors give no express warranties, guarantees or conditions. You may have additional consumer rights under your local laws which this license cannot change. To the extent permitted under your local laws, the contributors exclude the implied warranties of merchantability, fitness for a particular purpose and non-infringement.


print_copyright

print_copyright

© Copyright 2013 Incomedia. All rights reserved.

Le informazioni contenute in questo manuale possono essere soggette a modifiche senza alcun preavviso. Nessuna parte di questo manuale può essere riprodotta o trasmessa in qualsiasi forma o con qualsiasi mezzo, elettronico o meccanico, per qualsiasi scopo, senza l'espresso consenso scritto di Incomedia.

Si ricorda che filmati, suoni o immagini che si desidera utilizzare nei progetti possono essere soggetti a diritto d'autore. L'inserimento non autorizzato di tali materiali potrebbe, dunque, rappresentare una violazione dei diritti di autore ed è bene accertarsi di poterne fare uso liberamente o ottenere i permessi necessari dai rispettivi autori o dagli enti preposti.

Incomedia, WebSite X5, WebSite X5 Evolution sono marchi registrati di Incomedia s.r.l. Altri marchi o nomi di prodotti citati nel presente documento sono marchi o marchi registrati dei rispettivi proprietari.

Scritto e impaginato da Incomedia s.r.l.